如何检查 $slots 中值的组件类型？

Question

我将提供一个简单示例来说明我面临的问题。

所以我有一个包含以下代码的页面：

<Slider>
  <Slide>
    <p>test 1</p>
  </Slide>
  <Slide> test 2 </Slide>
  <div>test3</div>
</Slider>

问题出在滑块的安装部分。

内部滑块

<template>
  <div class="h-48 w-full">
    <slot></slot>
  </div>
</template>

<script>
export default {
  data: () => ({
    slides: [],
  }),
  watch: {
    slides() {
      console.log(this.slides);
    },
  },
  mounted() {
    this.$slots.default().forEach((vNode) => {
      console.log(vNode);
      // this.slides.push(node.componentInstance)
    });
  },
};
</script>

如何判断vNode是不是Slide组件的实例？
控制台记录 return 以下对象：

{
    "__v_isVNode": true,
    "__v_skip": true,
    "type": {
        "__hmrId": "6e03689e",
        "__file": "<route to project>/src/components/CarouselSlide.vue"
    },
    "props": null,
    "key": null,
    "ref": null,
    "scopeId": null,
    "slotScopeIds": null,
    "children": {
        "_": 1
    },
    "component": null,
    "suspense": null,
    "ssContent": null,
    "ssFallback": null,
    "dirs": null,
    "transition": null,
    "el": null,
    "anchor": null,
    "target": null,
    "targetAnchor": null,
    "staticCount": 0,
    "shapeFlag": 36,
    "patchFlag": 0,
    "dynamicProps": null,
    "dynamicChildren": null,
    "appContext": null
}

幻灯片如下：

<template>
  <div class="slide">
    <slot></slot>
  </div>
</template>

<script>
export default {};
</script>

这是一个演示：link

Answer 1

与JSX表示的React元素对象类似，Vue vnode对象有type 属性是DOM个元素的字符串，和Vue组件的组件。

应该有一个检查：

if (vNode.type === Slide) ...

如何检查 $slots 中值的组件类型？

How do I check the component type of values inside the $slots?

vue.js

vuejs3