&emsp;&emsp;Vue提供了一种内容分发技术，可将父组件中的内容传递给子组件的模板，实现方式参照了Web组件规范草案。 ## 一、插槽 &emsp;&emsp;Vue内置了一个\<slot>元素，能作为插槽（slot）存在，而插槽内可包含文本、HTML片段、组件等。以下面的btn组件为例，其模板中包含一个\<slot>元素，在DOM中为btn组件添加了文本内容。 ~~~html <btn>提交</btn> <script> Vue.component("btn", { template: '<button><slot></slot></button>' }); </script> ~~~ &emsp;&emsp;渲染出的\<button>元素会包含“提交”，即插槽被替换成了分发的内容，如下所示。 ~~~html <button>提交</button> ~~~ &emsp;&emsp;在插槽中允许添加默认的内容（即为\<slot>元素附加内容，如下所示），当父组件没有传递内容时，它们就会被渲染。 ~~~js Vue.component("btn", { template: '<button><slot>提交</slot></button>' }); ~~~ ## 二、具名插槽 &emsp;&emsp;具名插槽是指包含名称的插槽，即指定了name特性的\<slot>元素。当组件的模板中需要多个插槽时，就得通过名称来加以区分。例如有一个page组件，包含三个\<slot>元素，其中有两个声明了name特性，如下所示。 ~~~js Vue.component("page", { template: `<div> <header><slot name="header"></slot></header> <section><slot></slot></section> <footer><slot name="footer"></slot></footer> </div>` }); ~~~ &emsp;&emsp;如果要向具名插槽传递内容，那么可以在\<template>元素上使用v-slot指令，并让插槽名称成为它的参数，如下所示。 ~~~html <page> <template v-slot:header> <h1>头部</h1> </template> <p>内容</p> <template v-slot:footer> <h1>尾部</h1> </template> </page> ~~~ &emsp;&emsp;渲染出的DOM结构如下所示，分发的内容替换了对应的插槽。 ~~~html <div> <header> <h1>头部</h1> </header> <section> <p>内容</p> </section> <footer> <h1>尾部</h1> </footer> </div> ~~~ &emsp;&emsp;所有没有被包裹在带v-slot指令的\<template>元素中的内容（例如上面的\<p>元素），都会传递给没有名称的插槽（即默认插槽）。 &emsp;&emsp;注意，一个不带name特性的\<slot>元素，其实也有名称，叫default。在v-slot指令中，也可以对其进行指定，如下所示。 ~~~html <template v-slot:default> <p>内容</p> </template> ~~~ &emsp;&emsp;v-slot指令不仅支持动态参数，还允许特殊的缩写，即将参数前的v-slot:替换成#号，如下所示。 ~~~html <template v-slot:[obj.header]></template> <template #header></template> ~~~ ## 三、作用域插槽 &emsp;&emsp;在讲解作用域插槽之前，需要要先了解一下编译作用域。 **1）编译作用域** &emsp;&emsp;父组件模板中的内容都是在父级作用域中编译的，而子组件模板中的内容都是在子级作用域中编译的，即两级作用域中的数据无法相互访问。下面以btn组件为例，它的模板中包含一个插槽，并在数据对象中声明了一个txt属性。 ~~~js Vue.component("btn", { data: function() { return { txt:"提交" }; }, template: '<button><slot></slot></button>' }); ~~~ &emsp;&emsp;在为btn组件提供插值形式的内容时，如下代码所示，由于当前作用域不存在txt属性，因此会抛出错误。 ~~~html <btn>{{txt}}</btn> ~~~ **2）作用域插槽** &emsp;&emsp;这是一种特殊的插槽，其内容可访问子组件中的数据，即把模板传给插槽而不是渲染好的内容。还是以btn组件为例，与之前不同的是，为\<slot>元素自定义了一个txt特性，并为其绑定数据对象的txt属性，如下所示。 ~~~js Vue.component("btn", { data: function() { return { txt:"提交" }; }, template: '<button><slot :txt="txt"></slot></button>' }); ~~~ &emsp;&emsp;在使用btn组件时，需要为v-slot指令传递一个变量，名称可自定义（例如slots），其值是由插槽上的自定义特性所组成的对象。 ~~~html <btn> <template v-slot:default="slots"> {{slots.txt}} </template> </btn> ~~~ &emsp;&emsp;当只提供了默认插槽时，可将v-slot指令转移到组件上，并且可省略default名称，如下所示。 ~~~html <btn v-slot="slots"> {{slots.txt}} </btn> ~~~ &emsp;&emsp;注意，缩写形式的默认插槽不能与具名插槽混用，因为这样会导致作用域不明确。 ~~~html <btn v-slot="slots"> {{slots.txt}} <template v-slot:custom></template> </btn> ~~~ ***** > 原文出处： [博客园-Vue躬行记](https://www.cnblogs.com/strick/category/1512864.html) [知乎专栏-Vue躬行记](https://zhuanlan.zhihu.com/pwvue) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。