使用插槽前需要掌握Vue自定义组件的基础，插槽应用于自定义模板中，用于构建子模版，最形象的例子就是 列表标题（父模板） 与 列表内容（子模版对应）
回顾纯静态H5无序列表
<p>列表</p>
<ul>
<li>JAVA</li>
<li>Python</li>
<li>vue-cli</li>
</ul>
自定义无序列表框架
Vue.component("todo",{
template:
'<div>'+
'<slot name="todo-title"></slot>'+
'<ul>'+
'<slot name="todo-items"></slot>' +
'</ul>'+
'</div>'
});
- 上述代码中对应静态h5代码，将列表抽出 标题和列表内容 用插槽标签描述，其中name属性用作前端引用和定义组件时区分
标题组件
Vue.component("todo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
- 标题组件涵盖一个 title属性并定义模板显示标题
列表内容组件
Vue.component("todo-items",{
props: ['item'],
template: '<li>{{item}}</li>'
});
- 列表内容组件 定义无序列表模板，书籍信息属性
定义数据及使用模板
var vm = new Vue({
el: '#app',
data: {
titles: "列表",
todoItems: ['JAVA','数据结构']
}, // 数据
});
<div id="app">
<todo>
<!--插槽 绑定自定义组件中的属性-->
<todo-title slot="todo-title" v-bind:title="titles"></todo-title>
<todo-items slot="todo-items" v-for="itemE in todoItems" v-bind:item="itemE"></todo-items>
</todo>
</div>
