vue · 插槽 | $slots：访问所有命名插槽内容 | 插槽的使用：子组件和父组件如何书写？

子组件，插槽的内容是由父组件传递进来的。

子组件定义插槽 —— 子组件确定要 插入的位置 ——  <slot name="xxx" /> 定位

父组件定义插槽里的内容 —— 父组件确定 内容 —— <template #prefix>  内容

$slots —— 访问插槽内容的对象

子组件中访问 $slots，就能知道父组件是否有传入插槽

• $slots 是 Vue 实例中的一个属性，用于访问所有命名插槽内容。

• 它是一个对象，键是插槽的名字，值是对应的 VNode 数组（Vue 虚拟 DOM 节点）。

与 $slots 类似的还有：

对象	作用说明
$slots	原始插槽内容，是未处理的 VNode。
$scopedSlots (Vue 2)	用于访问作用域插槽（函数）。 Vue 3 中已废弃。
slots (Vue 3 中 Composition API)	用于组合式 API 中访问插槽内容。

 vue3中

setup(props, { slots }) {
  if (slots.header) {
    const headerVNode = slots.header()
  }
}

注意：

• $slots 中的 内容 是 VNode 对象数组，不是 HTML 字符串。

• 不要直接修改 $slots，它是 只读 的。

• 若插槽为空，对应的键 会是 undefined。

如何判断是子组件还是父组件？

子组件

• 定义了 <slot name="xxx" /> 插槽。
• 插槽用于让父组件传入内容，所以 子组件接收内容，属于被插槽注入者 => 子组件。
• 它也使用了 defineProps 和 defineEmits，表明它是一个组件模块，接收 props 和发出事件。

父组件

• 父组件使用 <template #prefix> 提供了 名为 prefix 的插槽内容。

• 在 子组件件内部，插槽 <slot name="prefix" /> 的位置会渲染父组件提供的 内容 <Icon icon="search" />。

• <template #xxx>...</template>，定义插槽中的具体内容

例

<!-- 子组件 -->
<slot name="prefix" />

<!-- 父组件中 -->
<VkInput v-model="text">
  <template #prefix>
    <Icon icon="search" />
  </template>
  <template #suffix>
    <span style="color: gray">后缀</span>
  </template>
</VkInput>

例子：

子组件，<slot name="xxx" />，只是占位符，内容由父组件传入

父组件，<template #xxx></template>，定义插槽中的具体内容