Vue3中容器组件如何感知并管理其子组件？

想要创建一个容器组件MyChipGroup，它能管理状态并响应子组件MyChip的事件，示例代码如下：

<MyChipGroup v-model="selections">
  <MyChip>Chip 1</MyChip>
  <MyChip>Chip 2</MyChip>
  <MyChip>Chip 3</MyChip>
</MyChipGroup>

Vue3中已移除$children属性，父组件不应直接知晓子组件信息（除scoped slots外）。但Vuetify的VChipGroup组件却能实现类似交互：

<v-chip-group>
  <v-chip>Chip 1</v-chip>
  <v-chip>Chip 2</v-chip>
  <v-chip>Chip 3</v-chip>
</v-chip-group>

请问在Vue3中该如何实现这类容器组件与子组件的交互？我有几个猜想：1. 子组件挂载前存入全局隐藏存储；2. 容器内搜索DOM元素反向获取子组件；3. 其他方法？

可行实现方案 #

1. 依赖注入（Provide/Inject） #

这是Vue3推荐的跨组件通信方式，也是Vuetify这类UI库的核心实现方案：

• 在MyChipGroup中通过provide提供注册方法和状态管理逻辑：

  // MyChipGroup.vue
  import { ref, provide } from 'vue'
  export default {
    props: ['modelValue'],
    emits: ['update:modelValue'],
    setup(props, { emit }) {
      const selectedValues = ref(props.modelValue || [])
      // 提供子组件注册方法
      const registerChip = (chip) => {
        chip.isSelected = selectedValues.value.includes(chip.value)
      }
      // 提供选中状态切换的通知方法
      const onChipToggle = (value) => {
        const idx = selectedValues.value.indexOf(value)
        idx > -1 ? selectedValues.value.splice(idx, 1) : selectedValues.value.push(value)
        emit('update:modelValue', selectedValues.value)
      }
      provide('chipGroupContext', { registerChip, onChipToggle, selectedValues })
      return { selectedValues }
    }
  }
  

• 在MyChip中通过inject获取上下文，挂载时完成注册并处理交互：

  // MyChip.vue
  import { inject, onMounted, ref } from 'vue'
  export default {
    props: ['value'],
    setup(props) {
      const isSelected = ref(false)
      const chipGroupCtx = inject('chipGroupContext')
      
      onMounted(() => {
        chipGroupCtx?.registerChip({ value: props.value, isSelected })
      })
      
      const handleClick = () => {
        chipGroupCtx?.onChipToggle(props.value)
        isSelected.value = !isSelected.value
      }
      return { isSelected, handleClick }
    }
  }
  

这种方式完全符合Vue3的设计理念，组件耦合度极低，且支持多实例并行使用。

2. 作用域插槽（Scoped Slots） #

如果需要更显式地控制子组件渲染逻辑，可以通过作用域插槽传递状态和方法：

<!-- MyChipGroup.vue -->
<template>
  <div class="chip-group">
    <slot :selected="selectedValues" :toggle="onChipToggle" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const selectedValues = ref(props.modelValue || [])

const onChipToggle = (value) => {
  const idx = selectedValues.value.indexOf(value)
  idx > -1 ? selectedValues.value.splice(idx, 1) : selectedValues.value.push(value)
  emit('update:modelValue', selectedValues.value)
}
</script>

使用时通过插槽接收参数绑定到子组件：

<MyChipGroup v-model="selections">
  <template #default="{ selected, toggle }">
    <MyChip :value="1" :selected="selected.includes(1)" @click="toggle(1)">Chip 1</MyChip>
    <MyChip :value="2" :selected="selected.includes(2)" @click="toggle(2)">Chip 2</MyChip>
  </template>
</MyChipGroup>

这种方式逻辑更透明，但需要使用者编写更多模板代码，适合需要高度自定义子组件的场景。

关于你的猜想的说明 #

• 全局隐藏存储：不推荐，全局状态会导致组件耦合度升高，无法支持多组件实例独立运行，维护成本极高。
• 搜索DOM反向获取组件：虽然可以通过getCurrentInstance()配合DOM元素拿到组件实例，但这种方式依赖DOM结构，容易因布局变更出错，违背Vue的响应式设计思想，不建议使用。

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