如何在Vue深层嵌套子组件中传递并访问Slot？

当然可以实现从父组件向深层嵌套子组件传递HTML内容，下面是几种实用的方案：

1. 逐层透传Slot（最直观的方式） #

如果嵌套层级不多，最直接的做法是让每个中间组件（比如示例里的Child1）定义对应的slot，把上层传入的内容透传到下一层。

Parent 组件代码：

<template>
  <div class="parent">
    <Child1>
      <!-- 把要传给Child2的内容放到Child1的slot里 -->
      <Child2>
        Content
      </Child2>
    </Child1>
  </div>
</template>

Child1 组件代码：

<template>
  <div class="child1">
    <!-- 定义slot接收Parent的内容，直接渲染即可 -->
    <slot></slot>
  </div>
</template>

这样Child2就能正常拿到并渲染Parent传入的内容了。缺点是层级多的话，每个中间组件都要写一遍slot，略显繁琐。

2. 使用Vue 3的Teleport组件（跳过中间层级） #

如果嵌套层级很深，不想逐层透传，可以用Vue 3的Teleport直接把父组件的内容挂载到深层子组件的指定位置。

Child2 组件预留挂载点：

<template>
  <div class="child2">
    <!-- 给Teleport留个目标容器 -->
    <div id="child2-target"></div>
  </div>
</template>

Parent 组件用Teleport传递内容：

<template>
  <div class="parent">
    <Child1>
      <Child2></Child2>
    </Child1>
    <!-- 直接把内容传到Child2的目标容器里 -->
    <Teleport to="#child2-target">
      Content
    </Teleport>
  </div>
</template>

这种方式不用管中间的Child1，直接把内容送到Child2的指定位置，非常适合深层嵌套场景。

3. 结合provide/inject传递内容（动态场景适用） #

如果需要动态更新传递的内容，还可以用provide在父组件提供内容，深层子组件用inject接收后渲染。

Parent 组件提供内容：

<template>
  <div class="parent">
    <Child1></Child1>
  </div>
</template>
<script setup>
import { provide } from 'vue'
// 用函数包裹，支持内容动态更新
provide('slotContent', () => '<p>动态更新的Content</p>')
</script>

Child2 组件接收并渲染：

<template>
  <div class="child2" v-html="slotContent()"></div>
</template>
<script setup>
import { inject } from 'vue'
const slotContent = inject('slotContent')
</script>

注意用v-html渲染HTML内容时，要确保内容是安全的，避免XSS风险。

内容的提问来源于stack exchange，提问作者Legiarrd