Vue3中如何在父组件内引用插槽传入的子组件并获取其数据与方法

核心逻辑说明 #

普通插槽的渲染上下文由直接传入插槽内容的外层父组件持有，直接在content-block-ui-frame内部给<slot />标签绑定ref是无法获取插槽内子组件实例的。要实现从frame组件内部收集插槽子实例、并把实例能力透传给最外层编辑器的目标，需要分三层实现： #

分步骤实现 #

1. 块组件内部封装能力并显式暴露 #

由于<script setup>写法的组件默认具备闭包隔离特性，内部的响应式数据、方法不会直接对外暴露，需要用defineExpose把外层需要调用的能力抛出。
以content-block-type1组件为例：

<!-- ContentBlockType1.vue -->
<script setup>
import { reactive } from 'vue'
// 内部封装的块专属响应式数据
const blockContent = reactive({
  text: '',
  fontSize: 14,
  align: 'left'
})
// 内部封装的块专属业务方法
function saveCurrentBlock() {
  // 块自身的保存逻辑
  console.log('保存类型1块的内容', blockContent)
}
function validateCurrentBlock() {
  // 块自身的校验逻辑
  return blockContent.text.trim().length > 0
}
// 显式对外暴露需要被外层调用的能力
defineExpose({
  blockContent,
  saveCurrentBlock,
  validateCurrentBlock
})
</script>

2. frame组件内部收集插槽内的子组件实例 #

不再直接渲染内置的<slot />标签，而是通过useSlots()拿到插槽传入的VNode集合，通过回调ref的方式把每个VNode对应的组件实例收集起来，再把实例集合对外暴露。
content-block-ui-frame的参考实现：

<!-- ContentBlockUiFrame.vue -->
<template>
  <div class="container">
    <template v-for="(childNode, index) in defaultSlotNodes" :key="index">
      <!-- 给插槽传入的每个VNode绑定回调ref，收集组件实例 -->
      <component :is="childNode" :ref="collectBlockInstance" />
    </template>
  </div>
</template>

<script setup>
import { ref, useSlots } from 'vue'
const slots = useSlots()
// 存储收集到的所有插槽内子组件实例
const blockInstances = ref([])
// 拿到默认插槽传入的所有VNode
const defaultSlotNodes = slots.default?.() || []

// ref 回调函数，把渲染完成的组件实例存入集合
const collectBlockInstance = (instance) => {
  if (instance) {
    blockInstances.value.push(instance)
  }
}

// 把收集到的实例集合暴露给外层编辑器
defineExpose({
  blockInstances
})
</script>

3. 外层编辑器通过frame实例获取块能力 #

在最外层的块编辑器组件中，给每个content-block-ui-frame绑定ref，顺着frame组件暴露的blockInstances集合，就可以直接拿到对应块组件暴露的全部数据和方法，支撑全局编辑、保存、校验等流程。
外层编辑器的参考实现：

<!-- BlockEditor 主组件 -->
<template>
  <div>
    <content-block-ui-frame ref="frameRef1">
      <content-block-type1 />
    </content-block-ui-frame>

    <content-block-ui-frame ref="frameRef2">
      <content-block-type2 />
    </content-block-ui-frame>

    <content-block-ui-frame ref="frameRef3">
      <content-block-type3 />
    </content-block-ui-frame>

    <button @click="triggerSaveAll">保存全部内容块</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const frameRef1 = ref(null)
const frameRef2 = ref(null)
const frameRef3 = ref(null)

function triggerSaveAll() {
  // 从每个frame实例中拿到对应块的组件实例
  const block1 = frameRef1.value.blockInstances[0]
  const block2 = frameRef2.value.blockInstances[0]
  const block3 = frameRef3.value.blockInstances[0]
  // 统一调用块暴露的校验、保存方法
  if(block1.validateCurrentBlock()) block1.saveCurrentBlock()
  if(block2.validateCurrentBlock()) block2.saveCurrentBlock()
  if(block3.validateCurrentBlock()) block3.saveCurrentBlock()
}
</script>

常见踩坑点 #

• 不要直接给<slot />标签绑定ref，slot是Vue提供的内容分发占位符，本身不是DOM节点或组件实例，绑定ref无法获取到内部渲染的内容。
• 如果没有调用defineExpose，就算成功拿到块组件实例，也访问不到内部的响应式数据和方法，<script setup>的隔离特性会阻止外部直接读取闭包内的变量。
• 回调ref收集实例时，要注意在组件卸载时清理已销毁的实例引用，避免内存泄漏。

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