自定义事件
? 通以上代码不难发现，数据项在Vue的实例中， 但删除操作要在组件中完成， 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题； 使用this.$emit(‘自定义事件名’， 参数) ， 操作过程如下：
1-在vue的实例中增加了methods对象并定义了一个名为removeTodoltems的方法
2-修改todo-items待办内容组件的代码，增加一个删除按钮，并且绑定事件！
3-修改todo-items待办内容组件的HTML代码，增加一个自定义事件，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <todo> <todo-title slot="todo-title" :title="title"></todo-title> <todo-items slot="todo-items" v-for="(item,index) in todoItems" :items="item" v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></todo-items> </todo> </div> <!--导入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script> //solt:插槽 Vue.component("tudo",{ template:'<div>\ <slot name="todo-title"></slot>\ <ul>\ <slot name="todo-items"></slot>\ </ul>\ </div>' }); Vue.component("todo-title",{ props:['title'], template: '<div>{{title}}</div>' }); Vue.component("todo-items",{ props: ['items','index'], //只能绑定当前组件的方法 template:'<li>{{index}}-----{{items}} <button @click="remove">删除</button></li>', methods: { remove: function (index) { //this.$emit自定义事件分发 this.$emit('remove',index) } } }); var vm = new Vue({ el: "#app", data: { title: "书籍列表", todoItems:["Java","Python","C++"] }, methods: { removeItems: function (index) { console.log("删除了"+this.todoItems[index]+"OK"); this.todoItems.splice(index,1,"haha"); //一次删除一个元素 } } }) </script> </body> </html>对上一个代码进行修改，实现删除功能逻辑理解
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #vue自定义事件 #但删除操作要在组件中完成 #参数
