Vue3中如何根据插槽子组件的Prop条件渲染父组件内容？

问题场景 #

想要在Vue 3的父组件中，根据插槽内子组件是否传入特定Prop（比如示例中的baz），控制父组件模板中代码块的显示。示例结构如下：

<Foo>
  <Bar/>
  <Bar baz="baz" />
</Foo>

模板直接访问的局限性 #

虽然可以通过v-if="$slots.default"判断默认插槽是否存在，但无法直接在模板中通过$slots访问子组件的Prop。以下两种常见尝试均无法生效：

尝试1：直接访问插槽的props属性 #

<script setup></script>

<template>
  <h1>Foo</h1>
  <template v-if="$slots.default.props.baz">
    <!-- 依赖baz是否存在的自定义逻辑 -->
  </template>
  <slot/>
</template>

尝试2：遍历插槽节点 #

<script setup></script>

<template>
  <h1>Foo</h1>
  <template v-for="slot in $slots.default">
    <div v-if="slot.props.baz"><!-- 执行操作 --></div>
  </template>
  <slot/>
</template>

这是因为模板中的$slots.default是插槽渲染函数，而非直接的VNode数组，无法直接遍历或访问其props。

可行方案：useSlots() + 响应式判断 #

通过useSlots()组合式API获取插槽的VNode数组，结合computed实现响应式条件判断，就能在模板中使用该条件进行渲染：

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

const slots = useSlots()
// 响应式判断：插槽内是否有子组件传入了baz Prop
const hasBazProp = computed(() => {
  // 先判断默认插槽是否存在，再遍历节点检查props
  return slots.default?.().some(slotNode => {
    return slotNode.props?.baz !== undefined
  }) ?? false
})
</script>

<template>
  <h1>Foo</h1>
  <!-- 根据判断结果条件渲染 -->
  <div v-if="hasBazProp">
    当插槽内存在传入baz Prop的Bar组件时，显示此内容
  </div>
  <slot/>
</template>

关键说明 #

• slots.default()会返回默认插槽的VNode数组，每个VNode的props属性包含了传递给对应子组件的所有Prop
• 使用computed包裹判断逻辑，确保当插槽内容动态变化时，条件渲染能自动更新
• 可根据需求调整判断逻辑，比如检查所有子组件是否都传入了baz，或获取特定Prop的值进行更复杂的判断

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