插槽-slot

什么是插槽

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

之前的HTML代码

<div>
    <h1>标题</h1>
    <ul>
        <li>JavaSE</li>
        <li>JavaEE</li>
        <li>JavaME</li>
    </ul>
</div>

实际开发中，类似上例中的 div 和 ul 的标签元素常常保持不变，而 li 和 h1等元素因常常需要跟数据库进行数据交互而发生改变，可以使用组件中的插槽来简化代码。

利用插槽来编写vue代码

    Vue.component('henjie',{		//定义名为henjie的组件，用来搭建div，ul这些不变的部分。
        template: '<div>\
                        <slot name="henjie-title"></slot>\
                        <ul>\
                            <slot name="henjie-items"></slot>\
                        </ul>\
                   </div>'
    });	//为经常改变数据的位置设置插槽，并绑定组件
    Vue.component('henjie-title',{		//用来设置h1的插槽
        props: ['title'],				//接收h1的数据
        template: '<h1>{{title}}</h1>'	//将数据导入h1
    });
    Vue.component('henjie-items',{		//用来设置li的插槽
        props: ['item'],				//接收li的数据
        template: '<li>{{item}}</li>'	//将数据导入li
    });

    var vue = new Vue({
        el: "#app",
        data: {
            titledata: '恨劫的博客',			//h1的数据，将会通过模板导入插槽
            henjieitems: ['JavaSE','JavaEE','JavaME']	//li的数据，将会通过模板导入插槽
        }
    });

vue 可以将原生的HTML拆解成看不懂的样子，将HTML代码中不变的骨架，定义一个专门的组件进行构建，也就是上例中的henjie，对于骨架中可变的部分，设置一个动态可插拔的插槽slot，方便下面专门进行定义，需要注意的是，对于代码中这些专门定义的插槽，要在骨架中以name进行关联。

henjie-title以及henjie-items中，以props来接收HTML 模板中的数据，并将这些数据导入插槽模板中的具体位置。

改变后的HTML模板

<div id="app">
    <henjie>
        <henjie-title slot="henjie-title" v-bind:title="titledata"></henjie-title>
        <henjie-items slot="henjie-items" v-bind:item="itemdata" v-for="itemdata in henjieitems"></henjie-items>
    </henjie>
</div>

在henjie-title中，以slot属性来绑定vue代码中专门的插槽组件，通过v-bind来绑定插槽props中的title参数，再将vue对象data中的titledata传给title。

在henjie-items中，以slot属性来绑定vue代码中专门的插槽组件，通过v-bind来绑定插槽props中的item参数，再将vue对象data中的henjieitems以v-for循环遍历得到的itemdata传给item。

通过以上两个步骤，就成功将数据通过模板传入给插槽。

结果呈现

因为vue的双向绑定，如果改变数据，那么视图也会动态的改变：