问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
使用-Slot-分发内容
看官方文档的组件部分看到上面链接中的这个地方就开始懵逼了，这个SLOT分发内容到底是什么意思啊？
哪些情况下需要用它？
他起什么作用？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
假定 my-component 组件有下面模板：
&h2&我是子组件的标题&/h2&
&slot&这里可以理解为占位符，就是让这里的内容由组件的调用者传入&/slot&
调用 my-component：
&h1&我是调用者的标题，下面调用了 my-component 组件&/h1&
&my-component&
&p&这是一些初始内容(这里会替换my-component 里面的slot)&/p&
&p&这是更多的初始内容(这里会替换my-component 里面的slot)&/p&
&/my-component&
最后调用者和组件被渲染成：
&h1&我是调用者的标题，下面调用了 my-component 组件&/h1&
&h2&我是子组件的标题&/h2&
&p&这是一些初始内容(这里会替换my-component 里面的slot)&/p&
&p&这是更多的初始内容(这里会替换my-component 里面的slot)&/p&
你还可以想象一下， div 其实就是浏览器原生的一个组件，我们在div标签内写入的标签，最后都会被渲染出来，div 就是一个最简单的内容分发组件 。
&slot&&/slot&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
内容分发的业务场景大部分应用在组件复用时，例如楼主写了共享组件A，共享组件A内部的内容渲染取决于调用它的组件给其传入的内容,此时就需要slot上场了。因此slot的作用就是在公有组件中留给不同场景下调用时需要传入的渲染内容。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
如果了解 Angular，这和 Angular 的交织的概念是相似的。
SLOT 用于实现父子组件渲染内容的“交织”——你中有我，我中有你。
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App感悟（21）
之前看官方文档，由于自己理解的偏差，不知道slot是干嘛的，看到小标题，使用Slot分发内容，就以为 是要往下派发内容。然后就没有理解插槽的概念。其实说白了，使用slot就是先圈一块地，将来可能种花种菜，也有可能在这块地上建房子。然而slot可以以一当十，可以插入很多东西。不知明白否？
由于项目经验有限，这篇我就先跟着官网的知识点走，当然会加入自己的部分项目代码。
关于slot是这样说的，
除非子组件模板包含至少一个&&slot&&插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。
最初在&&slot&&标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。
假定&my-component&组件有下面模板：
&我是子组件的标题&
只有在没有要分发的内容时才会显示。
父组件模版：
&我是父组件的标题&
&这是一些初始内容&
&这是更多的初始内容&
渲染结果：
&我是父组件的标题&
&我是子组件的标题&
&这是一些初始内容&
&这是更多的初始内容&
除了上述问题，还可以，给出名称，具名slot。
难点在于作用域插槽的理解：
上面这样讲到，
作用域插槽是一种特殊类型的插槽，用作使用一个（能够传递数据到）可重用模板替换已渲染元素。
在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样
class=&child&&
text=&hello from child&&&&
class=&parent&&
scope=&props&&
&hello from parent&
&{{ props.text }}&
class=&parent&&
class=&child&&
&hello from parent&
&hello from child&
还有一个就是用于列表组件，允许组件自定义应该如何渲染列表每一项。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：148280次
积分：2320
积分：2320
排名：第15119名
原创：69篇
转载：111篇
评论：27条
(3)(15)(4)(15)(8)(8)(31)(50)(19)(10)(9)(1)(14)&官方文档其实已经讲得很详细，我根据文档，把官方的小案例实现了一下，这样更直观
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
&script src="/vue@2.3.3/dist/vue.js"&&/script&
&div id="app"&
&!-- 单slot --&
&!-- 这里的所有内容会替换掉slot --&
&p&初始化段落一&/p&
&p&初始化段落二&/p&
&!-- 渲染结果 --&
&!-- &div&
&h1&组件标题&/h1&
&p&初始化段落一&/p&
&p&初始化段落二&/p&
&p&组件段落内容&/p&
&p&I am one&/p&
&/div& --&
&!-- 具名slot --&
&p slot="nav"&我是导航&/p&
&p slot="main"&我是内容&/p&
&p slot="footer"&我是底部&/p&
&!-- 渲染结果 --&
&!-- &div&
&p&我是导航&/p&
&p&我是内容&/p&
&p&我是底部&/p&
&/div& --&
&!-- 作用域插槽 --&
&!-- 父组件默认无法使用子组件数据 --&
&template scope="props"&
&p&{{props.text}}&/p&
&/template&
&/v-three&
&!-- 渲染结果 --&
&!-- &div&&p&I am three&/p&&/div& --&
&template id="one"&
&h1&组件标题&/h1&
&slot&&/slot&
&p&组件段落内容&/p&
&p&{{one}}&/p&
&/template&
&!-- 具名slot --&
&template id="two"&
&slot name="nav"&&/slot&
&slot name="main"&&/slot&
&slot name="footer"&&/slot&
&/template&
&!-- 作用域插槽 --&
&template id="three"&
&!-- 把数据传递给slot,这样父组件也可以访问three这个组件的数据 --&
&slot :text="three"&&/slot&
&/template&
el: '#app',
components: {
'v-one': {
template: '#one',
'one': 'I am one'
'v-two': {
template: '#two',
'two': 'I am two'
'v-three': {
template: '#three',
'three': 'I am three'
单个slot使用最简单，也是最常用的，当我们定义了一个子组件，父组件在使用的这个组件的时候，想在内部自定义一些初始化数据，这时候就可以用slot实现。
具名slot只是给slot加了name属性，在使用的时候可以引入多个。
作用域slot就比较强大了，我们知道子组件的数据，在父组件中是无法使用的，但是通过官方提供的扩展，可以轻松实现这一点。
渲染后效果图，可以直接复制代码自己在浏览器运行查看效果
阅读(...) 评论()&h3&#单个slot&/h3&
&!-- 定义child01模板 --&
&template id="child01"&
&div&this is temp01 component!&/div&
如果没有分发内容，这里将会被显示
&/template&
&div id="dr01"&
&child01&&/child01&
&br /&&br /&
&div&这里有新的内容01&/div&
&div&这里有新的内容02&/div&
&/child01&
//*********************************************************
//单个slot
var child01 = Vue.extend({
template: "#child01",
var dr01 = new Vue({
el: "#dr01",
components: {
"child01": child01
&结果展示:
#具名Slot（有名称的slot）
&h3&#具名Slot（有名称的slot）&/h3&
&!-- 定义模板child02 --&
&template id="child02"&
&slot name="s1"&&/slot&
&slot&&/slot&
&slot name="s2"&&/slot&
&/template&
&div id="dr02"&
&div slot="s1"&this is slot01&/div&
&div slot="s2"&this is slot02&/div&
&div&this is a simple div01&/div&
&div&this is a simple div02&/div&
&/child02&
//*********************************************************
//具名slot
var child02 = Vue.extend({
template: "#child02"
var dr02 = new Vue({
el: "#dr02",
components: {
"child02": child02
结果展示：
#编译作用域
&h3&编译作用域&/h3&
&template id="child03"&
&div&the two items following is child msg:&/div&
&div&{{cmsg_01}}&/div&
&div&{{cmsg_02}}&/div&
&div&the three items following is parent msg:&/div&
&slot name="s1"&&/slot&
&slot&&/slot&
&slot name="s2"&&/slot&
&/template&
&div id="dr03"&
&div slot="s1"&{{msg01}}&/div&
&div slot="s2"&{{msg02}}&/div&
&div&{{msg03}}&/div&
&/child03&
//*********************************************************
//编译作用域
var child03 = Vue.extend({
data: function() {
cmsg_01: "this is child msg_01",
cmsg_02: "this is child msg_02",
template: "#child03",
var dr03 = new Vue({
el: "#dr03",
msg01: "this is parent msg01",
msg02: "this is parent msg02",
msg03: "this is parent msg03",
components: {
"child03": child03
结果展示：
阅读(...) 评论()问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
使用-Slot-分发内容
看官方文档的组件部分看到上面链接中的这个地方就开始懵逼了，这个SLOT分发内容到底是什么意思啊？
哪些情况下需要用它？
他起什么作用？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
如果了解 Angular，这和 Angular 的交织的概念是相似的。
SLOT 用于实现父子组件渲染内容的“交织”——你中有我，我中有你。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
假定 my-component 组件有下面模板：
&h2&我是子组件的标题&/h2&
&slot&这里可以理解为占位符，就是让这里的内容由组件的调用者传入&/slot&
调用 my-component：
&h1&我是调用者的标题，下面调用了 my-component 组件&/h1&
&my-component&
&p&这是一些初始内容(这里会替换my-component 里面的slot)&/p&
&p&这是更多的初始内容(这里会替换my-component 里面的slot)&/p&
&/my-component&
最后调用者和组件被渲染成：
&h1&我是调用者的标题，下面调用了 my-component 组件&/h1&
&h2&我是子组件的标题&/h2&
&p&这是一些初始内容(这里会替换my-component 里面的slot)&/p&
&p&这是更多的初始内容(这里会替换my-component 里面的slot)&/p&
你还可以想象一下， div 其实就是浏览器原生的一个组件，我们在div标签内写入的标签，最后都会被渲染出来，div 就是一个最简单的内容分发组件 。
&slot&&/slot&
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App