vue插槽slot-分类

32 阅读1分钟

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>