插槽的使用
低版本的语法在将来会废弃，这里不赘述。
v-slot 绑定插槽，简写为#
匿名插槽
// DefaultSlot.vue
<div><slot></slot></div>
// App.vue
<DefaultSlot>这是一个匿名的插槽</DefaultSlot>
1
2
3
4
2
3
4
具名插槽
// NameSlot.vue
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
// App.vue
<NameSlot>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</NameSlot>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
作用域插槽
// 就是插槽和父组件之间的数据交互
// 父组件访问插槽数据
// Slot.vue
<header>
<slot name="header" :slotProps="slotProps"></slot>
</header>
// App.vue
// {slotProps}等价于解构，#header是v-slot:header缩写
<template #header="{slotProps}">
{{slotProps.name}}
<h1>这里是头部</h1>
</template>
// 插槽访问父组件数据
<template :data="data" #header="{slotProps}">
{{slotProps.name}}
<h1>这里是头部</h1>
</template>
// 插槽需要用props接收data
<header>
<slot name="header" :slotProps="data"></slot>
</header>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
动态插槽
// dynamicSlotName这是一个可变化的名称
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
</base-layout>
1
2
3
4
5
6
2
3
4
5
6
给具名作用域插槽设置别名
// 这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：
<current-user v-slot="{ user: person }">
{{ person.firstName }}
</current-user>
1
2
3
4
2
3
4