Vue中容器组件如何控制默认插槽中子组件的显示状态？

问题描述 #

容器组件需要控制默认插槽中数量未知的子组件的显示状态，子组件需通过某种方式向容器标识自身，如何实现容器修改指定子组件的display属性？

解决方案 #

1. 为子组件添加唯一标识 #

在使用子组件时，通过自定义属性（如data-component-id）为每个子组件设置唯一标识，方便容器识别：

<!-- App.vue -->
<script setup>
import Container from './Container.vue'
import ChildA from './ChildA.vue'
import ChildB from './ChildB.vue'
</script>

<template>
    <Container>
        <ChildA data-component-id="child-a" />
        <ChildB data-component-id="child-b" />
    </Container>
</template>

2. 容器组件维护状态并控制显示 #

在容器中通过ref维护各子组件的显示状态，遍历插槽节点匹配标识后，通过外层容器的动态样式控制display：

<!-- Container.vue -->
<script setup>
import { useSlots, ref } from 'vue'

const slots = useSlots()
// 存储子组件的显示状态，key对应子组件的标识ID
const componentVisibility = ref({
  'child-a': true,
  'child-b': true
})

// 修改指定组件的显示状态
function changeDisplay(componentId, show) {
  componentVisibility.value[componentId] = show
}
</script>

<template>
  <button @click="changeDisplay('child-a', false)">隐藏Child A</button>
  <button @click="changeDisplay('child-a', true)">显示Child A</button>
  <button @click="changeDisplay('child-b', false)">隐藏Child B</button>
  <button @click="changeDisplay('child-b', true)">显示Child B</button>

  <!-- 遍历插槽内容，根据标识匹配显示状态 -->
  <template v-for="(childNode, index) in slots.default()" :key="index">
    <div 
      :style="{ 
        display: componentVisibility[childNode.props['data-component-id']] ? 'block' : 'none' 
      }"
    >
      <component :is="childNode" />
    </div>
  </template>
</template>

3. 可选：子组件支持显示状态Prop #

如果希望直接控制子组件内部的显示逻辑，可以修改子组件添加visible Prop，容器通过插槽传递状态：

<!-- ChildA.vue / ChildB.vue -->
<script setup>
defineProps({
  visible: {
    type: Boolean,
    default: true
  }
})
</script>

<template>
  <div v-if="visible">
    ChildA
  </div>
</template>

容器模板修改为直接传递visible Prop：

<!-- Container.vue 模板部分 -->
<template v-for="(childNode, index) in slots.default()" :key="index">
  <component 
    :is="childNode" 
    :visible="componentVisibility[childNode.props['data-component-id']]"
  />
</template>

核心思路 #

• 通过自定义属性为子组件标记唯一身份，让容器能精准定位目标组件
• 使用响应式状态管理显示状态，结合动态样式或子组件Prop实现显示/隐藏控制
• 该方案支持任意数量的子组件，只要每个子组件带有唯一标识即可

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