wordpress 信息分析百度seo公司兴田德润
子组件，插槽的内容是由父组件传递进来的。
子组件定义插槽 —— 子组件确定要 插入的位置 —— <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>，定义插槽中的具体内容
| 问题 | 答案 |
|---|---|
| 插槽的内容是由子组件传过来的吗？ | 不是，插槽的内容是由父组件传入的。子组件只是定义了插槽的位置，父组件传入内容。 |