Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 元素作为承载分发内容的出口。
分类
1. 默认插槽
## child.vue
<p>
<slot>It's child</slot>
</p>
### parent.vue
<child>It's my child</child>
2. 具名插槽
## child.vue
<div>
<h3>
<slot name="title">It's title</slot>
</h3>
<slot name="default">It's content</slot>
</div>
## parent.vue
<child>
<template v-slot:title> //v-slot: 可简写为#
西游记介绍
</template>
<p v-slot:default>《西游记》是中国古代第一部浪漫主义章回体长篇神魔小说。现存...</p>
</child>
3. 作用域插槽
## child.vue
<div>
<slot v-bind:user="user" name="default">{{user.age}}</slot>
</div>
## parent.vue
<child v-slot:default="{user}">
{{user.name}}
</child>