如何检查$插槽内的值类型？

发布于 2025-01-30 20:11:25 字数 3373 浏览 0 评论 0原文

我将提供一个简单的示例，可以证明我面临的问题。

因此，我有一个包含以下代码的页面：

<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是否是幻灯片组件的实例？
The console log return the following object:

{
    "__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
}

Slide is just the following:

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

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

Here is a demo: link

原文

I'll provide a simple example that would demonstrate the problem I'm facing.

So I have a page that includes the following code:

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

The problem is within the mounted section of the Slider.

Inside 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>

How do I check if the vNode is an instance of the Slide component?
The console log return the following object:

{
    "__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
}

Slide is just the following:

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

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

Here is a demo: link

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伏妖词 2025-02-06 20:11:25

与由JSX表示的React元素对象类似，Vue Vnode对象具有类型属性，它是DOM元素的字符串，也是VUE组件的组件。

应该有一张支票：

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

Similarly to React element objects represented by JSX, Vue vnode objects have type property that is a string for DOM elements, and a component for Vue components.

There should be a check: