视频互动网站建设,企业培训考试app,微信公众平台开发者,广州网站开发哪家专业自定义事件
通以上代码不难发现#xff0c;数据项在Vue的实例中#xff0c; 但删除操作要在组件中完成#xff0c; 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了#xff0c; Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题…自定义事件
通以上代码不难发现数据项在Vue的实例中 但删除操作要在组件中完成 那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了 Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题 使用this.$emit(‘自定义事件名’ 参数) 操作过程如下
1-在vue的实例中增加了methods对象并定义了一个名为removeTodoltems的方法
2-修改todo-items待办内容组件的代码增加一个删除按钮并且绑定事件
3-修改todo-items待办内容组件的HTML代码增加一个自定义事件比如叫remove可以和组件的方法绑定然后绑定到vue的方法
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idapptodotodo-title slottodo-title :titletitle/todo-titletodo-items slottodo-items v-for(item,index) in todoItems:itemsitem v-bind:indexindex v-on:removeremoveItems(index) :keyindex/todo-items/todo/div!--导入vue.js--
script srchttps://cdn.jsdelivr.net/npm/vue2.5.16/dist/vue.min.js/script
script//solt:插槽Vue.component(tudo,{template:div\slot nametodo-title/slot\ul\slot nametodo-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 clickremove删除/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对上一个代码进行修改实现删除功能逻辑理解
