vue -- 自定义事件

自定义事件

数据项在Vue的实例中,但删除操作要在组件中完成,那么组件如何才能删除Vue实例中的数据呢?

此时就涉及到参数传递与事件分发了, Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;

使用this.$emit('自定义事件名,参数),操作过程如下:

自定义 – 组件事件删除vue实例中数据

1、在vue实例中添加删除数组todoItems数据的方法todoItems – 根据传入下标

    var vm = new Vue({
    
    
        el: '#vue',
        data: {
    
    
            title: "课程",
            todoItems:['a','b','c']
        },
        methods:{
    
    
            removertems : function(index){
    
    
                this.todoltems.splice(index,1);//一次删除一 个元素
            } 
        }
    });

2、在组件中添加按钮触发remove，定义组件remove方法并绑定事件

点击按钮触发组件remove方法，组件remove方法绑定了事件remove

    Vue.component("todo-items",{
    
    
        props: ['item','index'],
        template:'<li>{
    
    {index}}--{
    
    {item}}  <button @click="remove">删除</button></li>',
        methods: {
    
    
            remove: function(index){
    
    
                this.$emit('remove',index);
            }
        }
    });

补充：事件名大小写问题

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。

v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
因此，推荐你始终使用 kebab-case 的事件名。

3、view视图添加v-on监听时间remove，触发vue实例removertems方法

当v-on监听到点击删除按钮触发remove事件时，会调用vue实例removertems方法,并传递参数index

<div id="vue">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item="item" :index="index" v-on:remove="removertems(index)">
        </todo-items>
    </todo>
</div>