1.什么是slot

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

2.使用

建立组件预留插槽
定义填充入插槽的组件
实例化Vue并初始化数据
将值填充入插槽

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="vue">

     <!--4.将值填充入插槽-->

     <todo>

         <todo-title slot="todo-title" v-bind:title="my_title"></todo-title>

         <todo-items slot="todo-items" v-for="(item, index) in my_Items"

                     v-bind:item="item" v-bind:index="index" v-bind:key="index" ></todo-items>

     </todo>

 </div>

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

 <script type="text/javascript">

     //1.建议预留插槽的组件

     Vue.component("todo",{

         template: '<div>\

                         <slot name="todo-title"></slot>\

                         <ul>\

                             <slot name="todo-items"></slot>\

                         </ul>\

                    </div>'

     });

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

     Vue.component("todo-title",{

         props: ['title'],

         template: '<div>{{title}}</div>'

     })

     Vue.component("todo-items",{

         props: ['item','index'],

         template: '<li>{{index+1}}.{{item}}</li>'

     })

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

     var vm = new Vue({

         el: '#vue',

         data: {

             my_Items: ["java","C++","Python","PHP"],

             my_title: "学习Vue内容分发"

         }

     })

 </script>

 </body>

 </html>

3.自定义事件内容分发

在填充的组件template中添加标签并绑定组件自定义方法
在Vue的实例化对象中添加方法
在视图层标签内使用v-on来绑定Vue的实例化对象中的方法
在填充组件的自定义方法中触发视图层绑定的Vue实例化对象中的方法

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="vue">

     <todo>

         <todo-title slot="todo-title" v-bind:title="my_title"></todo-title>

         <!--3.在视图层标签内使用v-on来绑定Vue的实例化对象中的方法-->

         <todo-items slot="todo-items" v-for="(item, index) in my_Items"

                     v-bind:item="item" v-bind:index="index" v-bind:key="index"

                     v-on:remove="removeMyItems(index)"></todo-items>

     </todo>

 </div>

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

 <script type="text/javascript">

     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: ['item','index'],

         //1.在填充的组件template中添加标签并绑定组件自定义方法

         template: '<li>{{index+1}}.{{item}} ' +

             '<button @click="remove_component">删除</button></li>',

         methods: {

             //组件自定义的方法

             remove_component: function (index) {

                 //4.在填充组件的自定义方法中触发视图层绑定的Vue实例化对象中的方法

                 this.$emit('remove', index);

             }

         }

     })

     var vm = new Vue({

             el: '#vue',

             data: {

                 my_Items: ["java","C++","Python","PHP"],

                 my_title: "学习Vue内容分发"

             },

             methods: {

                 //2.在Vue的实例化对象中添加方法

                 removeMyItems: function (index) {

                     console.log("删除"+this.my_Items[index]+"成功");

                     // splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目，其中 index 为添加/删除项目的位置，1 表示删除的数量

                     this.my_Items.splice(index, 1);

                 }

             }

         })

 </script>

 </body>

 </html>

巴特西

8.Vue的slot

1.什么是slot

2.使用

建立组件预留插槽

定义填充入插槽的组件

实例化Vue并初始化数据

将值填充入插槽

最新文章

热门文章