Vue3 Composition API下类Tabs组件访问子组件child数据的实现方案

直接用 Vue 原生的 Provide/Inject + 子组件自主注册 机制实现，这是通用组件库嵌套组件的标准通信方案，完全符合你的所有约束要求，不需要退回Options API。

实现逻辑 #

核心思路是父组件通过provide暴露注册/注销方法、共享状态，子组件挂载时主动将自身需要对外暴露的状态、方法注册到父组件，卸载时自动注销，父组件可以直接拿到所有子组件的实时响应式数据，无需从VNode读取不稳定的内部属性。

代码示例 #

1. 父组件 carousel-group 实现 #

<script setup>
import { provide, ref, Symbol } from 'vue'

// 用Symbol作为注入key，避免全局命名冲突，适合组件库场景
const CAROUSEL_GROUP_KEY = Symbol('carousel-group')

// 父组件核心状态
const activeIndex = ref(0)
// 存储所有子面板的注册实例
const panels = ref([])

// 子组件注册方法
const registerPanel = (panelInst) => {
  panels.value.push(panelInst)
}

// 子组件注销方法
const unregisterPanel = (panelInst) => {
  const targetIdx = panels.value.findIndex(item => item.uid === panelInst.uid)
  if (targetIdx > -1) panels.value.splice(targetIdx, 1)
}

// 切换激活项方法，可扩展键盘导航、自动轮播等逻辑
const changeActive = (idx) => {
  if (idx < 0 || idx >= panels.value.length) return
  activeIndex.value = idx
  // 这里可以直接调用子实例暴露的方法，比如激活时自动聚焦
  panels.value[idx]?.focus?.()
}

// 向下注入所有需要共享给子组件的内容
provide(CAROUSEL_GROUP_KEY, {
  activeIndex,
  registerPanel,
  unregisterPanel,
  changeActive
})
</script>

<template>
  <div class="carousel-group">
    <slot />
  </div>
</template>

2. 子组件 carousel-panel 实现 #

<script setup>
import { inject, onMounted, onUnmounted, computed, Symbol } from 'vue'
const CAROUSEL_GROUP_KEY = Symbol('carousel-group')

// 注入父组件实例，兜底处理单独使用的场景
const carouselGroup = inject(CAROUSEL_GROUP_KEY, null)
// 生成子组件唯一标识
const uid = Symbol('carousel-panel')

// 子组件自身的激活状态，和父组件状态联动
const isActive = computed(() => {
  if (!carouselGroup) return false
  const currentIdx = carouselGroup.panels.value.findIndex(item => item.uid === uid)
  return currentIdx === carouselGroup.activeIndex.value
})

// 暴露给父组件调用的方法
const focus = () => {
  // 自定义聚焦逻辑，用于键盘导航
}

// 挂载时注册自身实例到父组件
onMounted(() => {
  carouselGroup?.registerPanel({
    uid,
    isActive,
    focus
    // 其他需要暴露给父组件的状态、方法都可以在此处添加
  })
})

// 卸载时从父组件移除自身实例
onUnmounted(() => {
  carouselGroup?.unregisterPanel({ uid })
})

// 可以通过defineExpose把状态暴露给组件使用者
defineExpose({
  isActive,
  focus
})
</script>

<template>
  <div v-show="isActive" class="carousel-panel">
    <slot />
  </div>
</template>

方案优势 #

• 无外部依赖：不需要Vuex/Pinia等状态管理，组件可独立发布使用
• 用法无额外成本：使用者还是按照你给出的基础用法编写即可，不需要手动传ref、配置数组
• 全Composition API实现：符合项目规范，逻辑可按需拆分复用
• 类型友好：如果用TS可以直接给注入的实例添加类型定义，维护成本低

不推荐直接从插槽VNode读取实例的方案：VNode上的component属于Vue内部属性，不同版本实现逻辑可能变化，且插槽每次更新都会重新生成VNode，容易出现状态不同步的问题。

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