我將提供一個簡單的示例來演示我面臨的問題。
所以我有一個包含以下代碼的頁面：
<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>
這是一個演示：鏈接
uj5u.com熱心網友回復：
與 JSX 表示的 React 元素物件類似，Vue vnode 物件的type屬性是 DOM 元素的字串，以及 Vue 組件的組件。
應該有一個檢查：
if (vNode.type === Slide) ...
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/479362.html