8.Vue的slot

1.什么是slot

　　在  Vue.js  中我们使用  <slot>  元素作为承载分发内容的出口，作者称其为 插槽，可以应用在组合组件的场景中

2.使用

  1. 建立组件预留插槽

  2. 定义填充入插槽的组件

  3. 实例化Vue并初始化数据

  4. 将值填充入插槽

 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.自定义事件内容分发

  1. 在填充的组件template中添加标签并绑定组件自定义方法
  2. 在Vue的实例化对象中添加方法
  3. 在视图层标签内使用v-on来绑定Vue的实例化对象中的方法
  4. 在填充组件的自定义方法中触发视图层绑定的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>

posted @ 2019-12-22 02:03  All_just_for_fun  阅读(500)  评论(0)  编辑  收藏  举报