<div id="app"> <todo> <todo-title slot="todo-title" v-bind:title="title"></todo-title> <todo-items slot="todo-items" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="removeItems"></todo-items> </todo> </div> <script type="text/javascript"> //定义组件todo是组件名称 Vue.component("todo", { 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: [‘index‘, ‘item‘], template: "<li>{{index}}---{{item}}<button @click=‘remove‘>删除</button></li>", methods:{ remove: function () { this.$emit("remove") 第一步 } } }) var vue = new Vue({ el: "#app", data: { title: ‘标题！‘, items: ["迪丽热巴", "杨幂", "刘亦菲"] } , methods: { removeItems: function (index) { this.items.splice(index, 1) 第二步 } } }) </script>
插槽的核心内涵就是，只不过slot是插槽标识而已。
<div id="todo"> <div id="todo-title"> 标题 </div> <ul id="todo-items"> <li>111</li> <li>111</li> <li>111</li> </ul> </div>
删除总结：首先在Vue.component定义组件里面是不能直接调取 var vue = new Vue 里的方法的，必须要间接的调取数据。
通过第一步的方法调取到第二步的方法。
注意1：在自定义组件里要先绑定 v-on:remove="removeItems" 第一步的 remove 方法 然后到第二步 removeItems
方法，因为只有这样 <button @click=‘remove‘>删除</button> 删除按钮里绑定的 remove 事件才能在自定义组件里
找到。总之就是先写 remove 方法，然后再 button 里绑定该方法，我们为了能够在自定义组件里响应该方法，需要
进行 v-on:remove 的一个绑定，这一就能够找到 removeItems 第二步中的方法。
注意2：在removeItems 里需要传一个参数 index 就是编号（removeItems: function (index)）而该参数在
v-for="(item,index) in items" 已经自动的传入了，所以在 v-on:remove="removeItems" 不用在传值了。
原文：https://www.cnblogs.com/shuicai/p/14892185.html