1.什么是slot
在 Vue.js 中我们使用 <slot> 元素作为承载分发内容的出口，作者称其为 插槽，可以应用在组合组件的场景中
2.使用
-
建立组件预留插槽
-
定义填充入插槽的组件
-
实例化Vue并初始化数据
-
将值填充入插槽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="vue"> 9 <!--4.将值填充入插槽--> 10 <todo> 11 <todo-title slot="todo-title" v-bind:title="my_title"></todo-title> 12 <todo-items slot="todo-items" v-for="(item, index) in my_Items" 13 v-bind:item="item" v-bind:index="index" v-bind:key="index" ></todo-items> 14 </todo> 15 </div> 16 17 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> 18 <script type="text/javascript"> 19 20 //1.建议预留插槽的组件 21 Vue.component("todo",{ 22 23 template: '<div> 24 <slot name="todo-title"></slot> 25 <ul> 26 <slot name="todo-items"></slot> 27 </ul> 28 </div>' 29 }); 30 31 //2.定义填充入插槽的组件 32 Vue.component("todo-title",{ 33 props: ['title'], 34 template: '<div>{{title}}</div>' 35 }) 36 37 Vue.component("todo-items",{ 38 props: ['item','index'], 39 template: '<li>{{index+1}}.{{item}}</li>' 40 }) 41 42 //3.实例化Vue并初始化数据 43 var vm = new Vue({ 44 el: '#vue', 45 data: { 46 my_Items: ["java","C++","Python","PHP"], 47 my_title: "学习Vue内容分发" 48 } 49 }) 50 </script> 51 </body> 52 </html>
3.自定义事件内容分发
- 在填充的组件template中添加标签并绑定组件自定义方法
- 在Vue的实例化对象中添加方法
- 在视图层标签内使用v-on来绑定Vue的实例化对象中的方法
- 在填充组件的自定义方法中触发视图层绑定的Vue实例化对象中的方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="vue"> 9 10 <todo> 11 <todo-title slot="todo-title" v-bind:title="my_title"></todo-title> 12 <!--3.在视图层标签内使用v-on来绑定Vue的实例化对象中的方法--> 13 <todo-items slot="todo-items" v-for="(item, index) in my_Items" 14 v-bind:item="item" v-bind:index="index" v-bind:key="index" 15 v-on:remove="removeMyItems(index)"></todo-items> 16 </todo> 17 </div> 18 19 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> 20 <script type="text/javascript"> 21 22 23 Vue.component("todo",{ 24 25 template: '<div> 26 <slot name="todo-title"></slot> 27 <ul> 28 <slot name="todo-items"></slot> 29 </ul> 30 </div>' 31 }); 32 33 34 Vue.component("todo-title",{ 35 props: ['title'], 36 template: '<div>{{title}}</div>' 37 }) 38 39 Vue.component("todo-items",{ 40 props: ['item','index'], 41 //1.在填充的组件template中添加标签并绑定组件自定义方法 42 template: '<li>{{index+1}}.{{item}} ' + 43 '<button @click="remove_component">删除</button></li>', 44 methods: { 45 //组件自定义的方法 46 remove_component: function (index) { 47 //4.在填充组件的自定义方法中触发视图层绑定的Vue实例化对象中的方法 48 this.$emit('remove', index); 49 } 50 } 51 }) 52 53 54 var vm = new Vue({ 55 el: '#vue', 56 data: { 57 my_Items: ["java","C++","Python","PHP"], 58 my_title: "学习Vue内容分发" 59 }, 60 methods: { 61 //2.在Vue的实例化对象中添加方法 62 removeMyItems: function (index) { 63 console.log("删除"+this.my_Items[index]+"成功"); 64 65 // splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目，其中 index 为添加/删除项目的位置，1 表示删除的数量 66 this.my_Items.splice(index, 1); 67 } 68 } 69 }) 70 </script> 71 </body> 72 </html>
