自定义事件内容分发
这个听的云里雾里,下面是一个示例demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <todo> <todo-title slot="todo-title" v-bind:title="title1"></todo-title> <todo-nie slot="todo-nie" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="removeitem(index)"></todo-nie> </todo> </div> <!--导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> Vue.component("todo", { template: '<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-nie"></slot>\</ul>\</div>' }) Vue.component("todo-title", { props: ['title'], template: '<div>{{title}}</div>' }) Vue.component("todo-nie", { props: ['item', 'index'], template: '<li>{{index}}---{{item}}<button @click="remove">删除</button></li>', methods: { remove: function (index) { this.$emit('remove', index) } } }) // 创建一个新的 Vue 实例 var vm = new Vue({ el: '#app', data: { items: ['带土', '爱', '琳'], title1: '标题' }, methods: { removeitem: function (index) { console.log("删除了" + this.items[index] + "ok") this.items.splice(index, 1);//删除一个元素 } } }); </script> </body> </html>