Vue自定义事件

Posted 2021-10-06 行则将至

Vue 自定义事件

 自定义事件

接上一篇博客 Vue插槽slot理解与初体验 ~

一、自定义方法

    //图书列表组件
    Vue.component(\'book-component-list\',{
        props: [\'l\'],
        template: \'<li>{{l}}<input style="margin-left: 20px" type="button" value="删除" v-on:click="remove"/></li>\'
        ,methods: {
            remove: function(){
                alert("remove method");
            }
        }
    });

通过v-on:click="事件名"绑定，简写形式：@cilck="方法名"

二、需要删除列表数据

1. 在Vue实例中定义方法

    //图书列表组件
    Vue.component(\'book-component-list\',{
        props: [\'l\'],
        template: \'<li>{{l}}<input style="margin-left: 20px" type="button" value="删除" v-on:click="removeItems"/></li>\'
        ,methods: {
            remove: function(){
                alert("remove method");
            }
        }
    });
    let vApp = new Vue({
        el: \'#app\'
        ,data: {
            title: \'图书列表\'
            ,list: [
                \'红楼梦\',\'三国演义\',\'水浒传\',\'西游记\'
            ]
        }
        ,methods: {
            removeItems: function(){
                alert("vue removeItems");
            }
        }
    });

将vue实例的removeItems方法绑定到删除按钮上发现不能直接调用该方法，但同时Vue绑定了前端页面，id=app的div标签，前端页面是可以调用removeItems方法的。因此可以通过前端页面绑定removeItems方法，然后自定义事件传递给子组件

2. 前端绑定Vue方法

<div id="app">
    <book-component>
        <book-component-title slot="title" v-bind:ti="title"></book-component-title>
        <book-component-list slot="list" v-for="li in list" v-bind:l="li" v-on:remove-item="removeItems"></book-component-list>
    </book-component>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script>
    //图书组件
    Vue.component(\'book-component\',{
        template: \'<div><slot name=\\\'title\\\'></slot><ul><slot name=\\\'list\\\'></slot></ul></div>\'
    });
    //图书标题组件
    Vue.component(\'book-component-title\',{
        props: [\'ti\'],
        template: \'<h3>{{ti}}</h3>\'
    });
    //图书列表组件
    Vue.component(\'book-component-list\',{
        props: [\'l\'],
        template: \'<li>{{l}}<input style="margin-left: 20px" type="button" value="删除" v-on:click="remove"/></li>\'
        ,methods: {
            remove: function(){
                this.$emit("remove-item");//
            }
        }
    });
    let vApp = new Vue({
        el: \'#app\'
        ,data: {
            title: \'图书列表\'
            ,list: [
                \'红楼梦\',\'三国演义\',\'水浒传\',\'西游记\'
            ]
        }
        ,methods: {
            removeItems: function(){
                alert("vue removeItems");
            }
        }
    });
</script>

使用this.$emit(\'自定义方法\',参数名)来调用前端自定义方法，此时以上代码就能完成调用removeItems方法了

这里有个坑，自定义的方法虽然方法名任意，但是不能用驼峰，v-on:remove-item="removeItems"此处取名removeItem是不可以的，虽然不会报错，但用this.$emit调用是无效的

3. 传递删除参数（index）

既然能够调用，说明我们就可以删除data里的数据了

• 前端自定义方法

<div id="app">
    <book-component>
        <book-component-title slot="title" v-bind:ti="title"></book-component-title>
        <book-component-list slot="list" v-for="(li,index) in list" v-bind:l="li" v-bind:inlist="index" v-on:remove-item="removeItems(index)"></book-component-list>
    </book-component>
</div>

• 组件自定义方法

    //图书列表组件
    Vue.component(\'book-component-list\',{
        //该组件方法中的参数不能省略，因为它绑定了每个item的索引，必须传到下一个方法。
        //看过一个视频给下面参数全省略了，虽然能删除，但他的删除是默认一个一个删除，也就是无论点哪个按钮都会从第一个删除
        props: [\'l\',\'inlist\'],
        template: \'<li>{{l}}<input style="margin-left: 20px" type="button" value="删除" v-on:click="remove(inlist)"/></li>\'
        ,methods: {
            remove: function(inlist){
                this.$emit("remove-item",inlist);
            }
        }
    });

• Vue

    let vApp = new Vue({
        el: \'#app\'
        ,data: {
            title: \'图书列表\'
            ,list: [\'红楼梦\',\'三国演义\',\'水浒传\',\'西游记\']
        }
        ,methods: {
            removeItems: function(index){
                this.list.splice(index,1);//js的方法
            }
        }
    });

• 整体代码

<div id="app">
    <book-component>
        <book-component-title slot="title" v-bind:ti="title"></book-component-title>
        <book-component-list slot="list" v-for="(li,index) in list" v-bind:l="li" v-bind:inlist="index" v-on:remove-item="removeItems"></book-component-list>
    </book-component>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script>
    //图书组件
    Vue.component(\'book-component\',{
        template: \'<div><slot name=\\\'title\\\'></slot><ul><slot name=\\\'list\\\'></slot></ul></div>\'
    });
    //图书标题组件
    Vue.component(\'book-component-title\',{
        props: [\'ti\'],
        template: \'<h3>{{ti}}</h3>\'
    });
    //图书列表组件
    Vue.component(\'book-component-list\',{
        props: [\'l\',\'inlist\'],
        template: \'<li>{{l}}<input style="margin-left: 20px" type="button" value="删除" v-on:click="remove(inlist)"/></li>\'
        ,methods: {
            remove: function(inlist){
                this.$emit("remove-item",inlist);
            }
        }
    });
    let vApp = new Vue({
        el: \'#app\'
        ,data: {
            title: \'图书列表\'
            ,list: [\'红楼梦\',\'三国演义\',\'水浒传\',\'西游记\']
        }
        ,methods: {
            removeItems: function(index){
                console.log(index);
                this.list.splice(index,1);//js的方法
            }
        }
    });
</script>

已经完成了删除列表数据的操作,来看看index都经历了什么