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

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

子组件定义插槽 ------ 子组件确定要 插入的位置**------** 定位

父组件定义插槽里的内容 ------ 父组件确定 内容**------****<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。

---

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

子组件

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

父组件

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

• 在 子组件件内部，插槽 的位置会渲染父组件提供的 内容 。

• <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>，定义插槽中的具体内容

问题	答案
插槽的内容是由子组件传过来的吗？	不是，插槽的内容是由父组件传入的。子组件只是定义了插槽的位置 ，父组件传入内容。