Vue中容器组件如何修改默认插槽中子组件的CSS display属性？

我准备了一个Vue Playground示例，需求是容器组件要能控制默认插槽中数量未知的子组件的CSS display属性，理想方案也能适配其他CSS属性。子组件需要能被容器标识，请问该如何实现？

注：之前有相关问题仅讨论了非CSS方式的显隐方案。

示例代码 #

App.vue #

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

<template>
    <Container>
        <ChildA />
        <ChildB />
    </Container>
</template>

Container.vue #

<script setup>
import { useSlots, useAttrs, onMounted} from 'vue'

const slots = useSlots()

function logSlots(where) {
  console.log( `${where} slots`, slots )
  const children = slots.default()
  console.log( `${where} slots children`, children.length, children )
}

logSlots("setup")

function changeDisplay(whichChild, show) {
  console.log( "change display", whichChild, show)
  // 如何定位到ChildA？
  // 这里该写什么？
}

onMounted( () => {
  logSlots("onMounted")
})
</script>

<template>
  <button @click="logSlots('button')">log slots</button>
  <button @click="changeDisplay('child a', false)">Hide Child A</button>
  <button @click="changeDisplay('child a', true)">Show Child A</button>

  <slot />
</template>

ChildA.vue #

<script setup>
</script>

<template>
  <div>
    ChildA
  </div>
</template>

ChildB.vue #

<script setup>
</script>

<template>
  <div>
    ChildB
  </div>
</template>

实现方案 #

方案1：给子组件加标识，容器直接操作DOM #

这种方式无需修改子组件内部代码，仅需在调用时添加标识属性：

1. 修改App.vue中子组件的调用方式，添加自定义标识属性：

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

2. 容器组件中通过ref获取插槽容器，定位DOM并修改样式：

<script setup>
import { ref } from 'vue'

const containerRef = ref(null)

function changeDisplay(componentId, show) {
  const targetEl = containerRef.value?.querySelector(`[data-component-id="${componentId}"]`)
  if (targetEl) {
    targetEl.style.display = show ? 'block' : 'none'
    // 其他CSS属性也可以直接修改，比如 targetEl.style.color = '#ff0000'
  }
}
</script>

<template>
  <button @click="changeDisplay('child-a', false)">Hide Child A</button>
  <button @click="changeDisplay('child-a', true)">Show Child A</button>

  <div ref="containerRef">
    <slot />
  </div>
</template>

方案2：用Provide/Inject传递响应式状态（更符合Vue理念） #

通过响应式状态控制子组件样式，避免直接操作DOM：

1. 容器组件提供样式控制状态：

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

// 存储各子组件的样式配置
const componentStyles = ref({
  'child-a': { display: 'block' },
  'child-b': { display: 'block' }
})

// 把状态注入给子组件
provide('componentStyles', componentStyles)

function changeDisplay(componentId, show) {
  componentStyles.value[componentId] = {
    ...componentStyles.value[componentId],
    display: show ? 'block' : 'none'
  }
}
</script>

2. 子组件注入状态并绑定样式：以ChildA.vue为例，可通过props传入标识提升灵活性：

<script setup>
import { inject } from 'vue'

const props = defineProps({
  componentId: {
    type: String,
    required: true
  }
})

const componentStyles = inject('componentStyles')
</script>

<template>
  <div :style="componentStyles?.[props.componentId]">
    ChildA
  </div>
</template>

3. App.vue中传入子组件标识：

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

方案对比 #

• 方案1：直接操作DOM，适合简单场景，无需修改子组件内部，但不符合Vue响应式设计理念。
• 方案2：基于响应式状态，扩展性强，能轻松添加其他CSS属性控制，符合Vue的设计思想，但需要子组件配合注入状态。

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