1. 引言
通过前面的章节，我们已经学会了使用计算属性computed来做内存优化，有兴趣的同学可以参阅下：
- 《Vue系列教程（01）- 前端发展史》
- 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
- 《Vue系列教程（03）- Vue开发利器VsCode》
- 《Vue系列教程（04）- VsCode断点调试》
- 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
- 《Vue系列教程（06）- Vue调试神器（vue-devtools）》
- 《Vue系列教程（07）- Vue第一个程序（MVVM模式的引入）》
- 《Vue系列教程（08）- 基本语法》
- 《Vue系列教程（09）- 事件绑定》
- 《Vue系列教程（10）- Model数据内容双向绑定》
- 《Vue系列教程（11）- 组件详解》
- 《Vue系列教程（12）- Axios异步通信》
- 《Vue系列教程（13）- 计算属性（computed）》
本文主要讲解的是Vue的slot插槽特性。
2. Slot插槽
Slot插槽在Vue.js中使用<slot>元素作为承载分发内容的出口，主要应用在组合组件的场景中。
需要注意的是Vue关注于视图，所以视图是不会写数据的。
举个例子，一般的页面布局如下：
<div id="app"> <header> <!-- 我们希望把页头放这里 --> </header> <main> <!-- 我们希望把主要内容放这里 --> </main> </div>
如果使用插槽，那该如何写呢？下面来看看
2.1 案例代码
可以看到我们只关心布局代码定义，并把值绑定好即可，完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入js文件--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--view层，模板--> <div id="app"> <article> <aritcle-title slot="todo-title" v-bind:title="title"></aritcle-title> <aritcle-content slot="aritcle-content" v-for="(item,index) in contents" :item="item" :index="index"></aritcle-content> </article> </div> <script type="text/javascript"> Vue.component('aritcle', { template: '<div>\ <slot name="aritcle-title"></slot>\ <ul>\ <slot name="aritcle-content"></slot>\ </ul>\ </div>' }); Vue.component('aritcle-title', { props: ['title'], template: '<div>{{title}}</div>' }); //这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！ Vue.component("aritcle-content", { props: ["item", "index"], template: "<li>{{index+1}}、{{item}}</li>" }); var vm = new Vue({ el: "#app", data: { title: "阿甘兄的博客", contents: ['Java', 'Python', 'Vue'] } }); </script> </body> </html>
运行结果：
2.2 代码分析
① 首先定义了整体的模板：
Vue.component('aritcle', { template: '<div>\ <slot name="aritcle-title"></slot>\ <ul>\ <slot name="aritcle-content"></slot>\ </ul>\ </div>' });
② 然后模板里面的插槽内容格式：
// 定义aritcle-title插槽模板 Vue.component('aritcle-title', { props: ['title'], template: '<div>{{title}}</div>' }); // 定义aritcle-content插槽模板 Vue.component("aritcle-content", { props: ["item", "index"], template: "<li>{{index+1}}、{{item}}</li>" });
③ 最后在视图布局里声明模板（含插槽），并绑定Model：
<article> <aritcle-title slot="todo-title" v-bind:title="title"></aritcle-title> <aritcle-content slot="aritcle-content" v-for="(item,index) in contents" :item="item" :index="index"></aritcle-content> </article>
注意：
v-bind:title和:title作用一样，v-bind可以省略不写。
