如何检查$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组件的实例?
控制台日志返回以下对象:

{
"__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) ...