自定义事件
数据在Vue的实例中,但是删除操作要在组件中完成,那么组件如何才能删除Vue 实例中的数据?此时就涉及到参数传递与事件分发,Vue为我们提供了自定义事件的功能很好的帮助解决了这个问题;使用this.$emit('自定义事件名' 参数),操作过程如下:
1.在vue的实例中,增加了methods对象并定义了一个名为removeTodoItems的方法
new Vue({
el:'#vue',
data:{
title:"Test",
todoItems:["spring","springMVC","mybatis"],
},
methods:{
removeItems(index){
console.log("delete"+this.todoItems)
this.todoItems.splice(index,1);//一次删除一个元素
}
}
});
2.在子组件中增加一个methods对象并定义了一个名为remove的方法
Vue.component("todo-items",{
props:["item","index"],
//只能绑定当前组件的方法
template: "<li>{
{index}}---{
{item}}<button v-on:click=