Vue：如何检测Tile组件插槽内的指定<Listitem/>组件？

当然有办法实现！在Vue中，我们可以通过访问插槽的**VNode（虚拟节点）**来检测其中是否包含特定组件，然后根据检测结果动态应用不同的CSS样式。下面分Vue 2和Vue 3两种场景给出具体方案：

Vue 2 实现方案 #

首先，我们可以在Tile组件中添加一个计算属性，递归检查headline插槽的所有VNode，判断是否存在<ListItem/>组件。然后根据这个计算结果给容器动态添加class：

<template>
  <div class="tile" :class="{ 'has-listitem': hasListItemInHeadline }">
    <template v-if="$slots['headline']">
      <slot name="headline" />
    </template>
  </div>
</template>

<script>
import ListItem from './ListItem.vue' // 引入目标组件

export default {
  components: { ListItem },
  computed: {
    hasListItemInHeadline() {
      // 获取headline插槽的VNode数组
      const headlineVNodes = this.$slots.headline || []
      
      // 递归函数：检查VNode数组中是否包含ListItem组件
      const checkForListItem = (vnodes) => {
        return vnodes.some(vnode => {
          // Vue 2中，组件的VNode会携带componentOptions，其中Ctor是组件构造函数
          if (vnode.componentOptions && vnode.componentOptions.Ctor === ListItem) {
            return true
          }
          // 如果当前VNode有子节点，递归检查子节点
          if (vnode.children && vnode.children.length) {
            return checkForListItem(vnode.children)
          }
          return false
        })
      }
      
      return checkForListItem(headlineVNodes)
    }
  }
}
</script>

<style scoped>
.tile {
  /* 基础样式：适用于普通HTML标签的情况 */
  padding: 1rem;
  border: 1px solid #eee;
}

.tile.has-listitem {
  /* 包含ListItem时的专属样式 */
  padding-left: 2rem;
  border-left: 4px solid #2196F3;
}
</style>

Vue 3 实现方案 #

Vue 3的VNode结构有所变化，我们需要通过vnode.type来判断是否为目标组件，同时使用useSlots API获取插槽内容：

<template>
  <div class="tile" :class="{ 'has-listitem': hasListItemInHeadline }">
    <slot name="headline" />
  </div>
</template>

<script>
import ListItem from './ListItem.vue'
import { computed, useSlots } from 'vue'

export default {
  components: { ListItem },
  setup() {
    const slots = useSlots()
    
    const hasListItemInHeadline = computed(() => {
      // 获取headline插槽的VNode数组（Vue3中插槽是函数，调用后返回VNode数组）
      const headlineVNodes = slots.headline?.() || []
      
      const checkForListItem = (vnodes) => {
        return vnodes.some(vnode => {
          // Vue3中，组件的VNode.type就是组件本身
          if (vnode.type === ListItem) {
            return true
          }
          // 处理子节点：如果是数组则直接遍历，否则转为数组处理
          if (vnode.children && typeof vnode.children !== 'string') {
            const childVNodes = Array.isArray(vnode.children) ? vnode.children : [vnode.children]
            return checkForListItem(childVNodes)
          }
          return false
        })
      }
      
      return checkForListItem(headlineVNodes)
    })
    
    return { hasListItemInHeadline }
  }
}
</script>

<style scoped>
/* 样式和Vue2示例一致，按需调整 */
.tile {
  padding: 1rem;
  border: 1px solid #eee;
}

.tile.has-listitem {
  padding-left: 2rem;
  border-left: 4px solid #2196F3;
}
</style>

关键细节说明 #

• 递归检查的必要性：如果插槽内容是嵌套结构（比如<div><listitem/></div>），顶层VNode是普通HTML标签，必须递归检查子节点才能准确判断是否存在ListItem组件。
• 组件匹配逻辑：Vue2通过componentOptions.Ctor匹配组件构造函数，Vue3直接通过vnode.type匹配组件对象，确保不会误判普通HTML标签。
• 响应式更新：使用计算属性可以自动响应插槽内容的变化，当插槽内的组件或标签切换时，class会自动更新，样式也会随之变化。

简化场景（仅检查顶层VNode） #

如果你确定插槽内容不会嵌套，只需要检查顶层是否有ListItem组件，可以简化递归逻辑：

// Vue2简化版
hasListItemInHeadline() {
  const headlineVNodes = this.$slots.headline || []
  return headlineVNodes.some(vnode => 
    vnode.componentOptions && vnode.componentOptions.Ctor === ListItem
  )
}

// Vue3简化版
hasListItemInHeadline: computed(() => {
  const headlineVNodes = slots.headline?.() || []
  return headlineVNodes.some(vnode => vnode.type === ListItem)
})

这样就能完美实现你的需求：当headline插槽使用<ListItem/>时应用一套样式，使用普通HTML标签时应用另一套样式。

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