Vue自定义事件

1.在vue的实例中,增加了 methods 对象并定义了一个名为 removeTodoItems 的方法

 new Vue({
            el: '#app',
            data: {
                todoItems: ['星期一','星期二','星期三']
            },
            methods: {
                //该方法可以被模板中自定义事件触发
                removeTodoItems: function(index){
                    console.log("删除"+this.todoItems[index]+"成功了");
                    this.todoItems.splice(index,1);
                }
            }
        })

2.修改 todo-items 待办内容组件的代码,增加一个删除按钮,并且绑定事件!

this.$emit(‘自定义事件名’, 参数)

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

3.修改 todo-items 待办内容组件的 HTML 代码,增加一个自定义事件,比如叫 remove,可以和组件的方法绑定,然后绑定到vue的方法中!

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