插槽语法有版本新旧，倡议大家看新版本的语法，不要看旧的语法，防止在语法的新旧上有混同。
以下注释局部代码都应用新版语法进行演示。
首先是匿名插槽(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...