文章目录
自定义事件
数据项在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>