Vue自定义事件

2024-01-26 18:58:04

自定义事件

接上一篇博客 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);
            }
        }
    });

    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都经历了什么

码农公寓