当海风翻页时

插槽是什么#

插槽是组件的内容分发机制。子组件在模板里放一个 <slot> 占位，父组件写在子组件标签里的内容就渲染到这个位置。

1
<!-- 子组件 Dialog.vue -->
2
<div class="dialog">
3
  <slot></slot>
4
</div>

默认插槽#

<slot> 不写 name 时，它的名字隐含为 default，也就是默认插槽。

1
<Dialog>
2
  <div>我是填充的内容</div>
3
</Dialog>

父组件标签里没有指定插槽名的顶层内容，都会进入默认插槽。

具名插槽#

子组件需要多个内容出口时，给每个 <slot> 起 name，父组件按名字填充。

1
<!-- 子组件 -->
2
<div>
3
  <slot name="header"></slot>
4
  <slot></slot>
5
  <slot name="footer"></slot>
6
</div>

父组件用 <template v-slot:xxx> 指定目标插槽，v-slot:xxx 对应子组件里 name="xxx" 的插槽，简写是 #。没有指定名字的内容落在默认插槽。

1
<Dialog>
2
  <template v-slot:header>
3
    <div>我是头部</div>
4
  </template>
5

6
  <template v-slot:footer>
7
    <div>我是底部</div>
8
  </template>
9

10
  <div>我是默认内容</div>
11
</Dialog>

v-slot 放在哪里#

v-slot 写在 <template> 上和写在组件上都行。写在组件上时，只支持单个默认作用域插槽：

1
<Mouse v-slot="{ x, y }">
2
  Mouse position: {{ x }}, {{ y }}
3
</Mouse>

想同时用具名插槽和默认作用域插槽时，把 v-slot 放在组件上会编译报错，这时默认插槽要写成显式的 <template #default>。

v-slot 后面的参数可以省略，省略时指向 default，所以 <Child v-slot="{ x, y }"> 是合法的。只有要填充具名插槽时，才需要写名字。

作用域插槽#

普通插槽只能读父组件的数据。作用域插槽让子组件在渲染时把自己内部的数据传出去，由父组件决定怎么显示。

子组件在 <slot> 上用 v-bind 绑数据：

1
<!-- 子组件 -->
2
<slot :data="item"></slot>

这些绑定会打包成一个插槽 props 对象，父组件在 v-slot 的值上接收，可以直接解构：

1
<Dialog>
2
  <template #default="{ data }">
3
    <div>{{ data }}</div>
4
  </template>
5
</Dialog>

#default="props" 拿到的是整个对象，写成 #default="{ data }" 就只取需要的字段。

列表、表格、树形这类组件常用作用域插槽：子组件负责遍历和取数，父组件负责每一项怎么显示。

动态插槽名#

插槽名可以是变量，用 #[slotName] 绑定：

1
<template>
2
  <Dialog>
3
    <template #[activeSlot]>
4
      <div>插到 {{ activeSlot }} 插槽</div>
5
    </template>
6
  </Dialog>
7
</template>
8

9
<script setup>
10
import { ref } from 'vue'
11

12
const activeSlot = ref('header')
13
</script>

方括号里的表达式求值结果应当是字符串（也允许 null），否则匹配不到具名插槽。常见用法是按状态切换插槽。

插槽的默认内容#

<slot> 标签里的内容就是默认内容，父组件没有提供对应内容时显示：

1
<slot>
2
  我是默认内容，父组件没填时显示
3
</slot>