共计 1727 个字符，预计需要花费 5 分钟才能阅读完成。
插槽语法有版本新旧，倡议大家看新版本的语法，不要看旧的语法，防止在语法的新旧上有混同。
以下注释局部代码都应用新版语法进行演示。
首先是匿名插槽 (Default slot) 和具名插槽(Named slots)。
这里补充我来定义两个名词，不便后文阐明。
1、散发处 – 散发处留空, 期待内容填入。
2、应用处 – 在应用处搁置 text / html，应用处的内容会填充到散发处。
匿名插槽(Default slot)
若只须要一个散发处，这个时候能够用匿名插槽。
匿名插槽，就是默认插槽，应用处的内容都会搁置在这个默认插槽的地位。
那么能够间接在模板内 (Panel.vue 中) 增加一个 <slot></slot> 标签（<slot> 标签是散发的入口）。
↓ Panel.vue
<template id='panel'>
<div class="panel">
<div class="title">
题目
</div>
<div class="content">
<slot></slot> (匿名插槽，散发处)
</div>
<div class="footer">
更多信息
</div>
</div>
</template>这样即可。
应用时，在组件标签内 (<Panel> .. 这里.. </Panel>) 中间接输出须要插入的内容。
<div id="app">
<Panel>
hello slot (这里是应用处)
</Panel>
</div>hello slot 就会呈现在下面散发处的地位。
留神：<slot> 标签在 html 中不存在。
具名插槽(Named slots)
如果有多个散发处(要留出多个地位来搁置内容)，这时就要辨别各个散发处的名称(给插槽加个名字)，这时候就须要具名插槽了。
具体做法是能够在模板内 (Panel.vue 中) 退出 solt 标签 并给它一个 name 属性。
↓ Panel.vue
<template id='panel'>
<div class="panel">
<div class="title">
<slot name='s1'></slot>
</div>
<div class="content">
<slot name='s2'></slot>
</div>
<div class="footer">
<slot name='s3'> 我是默认值 </slot> // 散发处的默认值
</div>
</div>
</template>应用时，在组件标签内(<Panel> </Panel>) 中须要应用插槽的标签上加上 slot 属性。
slot 属性所在的标签能够是 <div> <template> 等，这个标签用什么没有要求。
slot 属性的值，要和散发处 <slot> 标签的 name 属性对应的值雷同 (“s1”, “s2”, “s3”)，这里是散发处的标识，让 vue 晓得上面的内容要搁置在哪个散发处的地位。
<div id="app">
<Panel>
<div slot='s1'> 题目 </div>
<template slot='s2'>Yoo, 内容 </template>
<p slot='s3'> 期待更多 </p>
</Panel>
</div>↑ 注：
- 写两个 slot=’s1′
如 <div slot=’s1′> 嘿嘿 </div> <div slot=’s1′> 哈哈 </div>
那么这两个内容会同时呈现在 name=’s1’ 的 solt 内容中。 - 应用处的 slot 属性，搁置在不同的标签上，
如 <div slot=’s1′> 题目 </div>
换成 <span slot=’s1′> 题目 </span>
没有问题，文本格式上可能有肯定区别，能够通过 css 来进行调整。 -
设置默认值（<slot name=’s3′> 我是默认值 </slot>），起到占位符的成果
<div class="footer"> <slot name='s3'> 我是默认值 </slot> </div>下面这块代码块的成果就是用 ” 我是默认值 ” 当做占位符。
当没有 <div slot=’s3′>xxx</div> 时, “ 我是默认值 ” 会呈现在散发处。
↓ 当这块代码呈现的时候，slot 的内容是空白（占位符 ” 我是默认值 ” 被空白所取代)
<Panel>
<div slot='s3'></div>
</Panel>同步更新到本人的语雀
https://www.yuque.com/diracke…