vue.js 无效的VNode类型：undefined(未定义)-与〈component：is=“comp”>一起使用时

bksxznpy 于 2023-01-26 发布在 Vue.js

关注(0)|答案(2)|浏览(3113)

我已经在这个问题上停留了一段时间，没有在线信息。使用VUE 3

我在路由器meta:标记中定义了一个布局组件。
在我的App.vue中，我检查指定的路由是否有layout meta标记，如果有，则'component：is=“layout”为真。

App.vue

<template>
  <component :is="layout">
    <router-view />
  </component>
</template>

<script>
  computed: {
    layout() {
      let layout = null;
      for (const match of this.$route.matched)
        if (match.meta && match.meta.layout) layout = match.meta.layout;
      if (layout) return layout;
      return "div";
    },
}
</script>

router.vue

const usLayout = () => import("../layouts/usLayout.vue");

    {
      path: "/",
      name: "us",
      component: GenericRouterView,
      meta: { layout: usLayout },
      children: usRoutes,
    },

我得到这个错误：
[Vue警告]：无效的VNode类型：在UsLayout处未定义在App处未定义
而且屏幕上什么都没有显示。你知道这个错误是什么意思/是什么原因吗？

vue.js

来源：https://stackoverflow.com/questions/69645120/invalid-vnode-type-undefined-undefined-when-used-with-component-is-comp

2条答案

按热度按时间

3bygqnnd1#

您的问题是在is="div"中使用div。component中的:is指令只接受组件定义，而不接受标记。
使用您的代码不可能直接呈现组件。您必须 Package 到另一个div或使用render函数：

<template>
  <div>
   <template v-if="layout === 'div'">
     <router-view />
   <template>
   <template v-else>
     <component :is="layout">
       <router-view />
     </component>
   </template>
  </div>
</template>

<script>
  computed: {
    layout() {
      let layout = null;
      for (const match of this.$route.matched)
        if (match.meta && match.meta.layout) layout = match.meta.layout;
      if (layout) return layout;
      return "div";
    },
}
</script>

使用渲染函数：

<script>
  computed: {
    layout() {
      let layout = null;
      for (const match of this.$route.matched)
        if (match.meta && match.meta.layout) layout = match.meta.layout;
      if (layout) return layout;
      return "div";
  },
  render(createElement) {
    return createElement(this.layout, [...])
  }
}
</script>

赞(0）回复(0）举报 2023-01-26

vx6bjr1n2#

当我迁移到Vue3时，我遇到了这个错误，并且没有在新的帮助函数defineAsyncComponent中 Package 我的延迟加载的Async Components。
错误

const PdfViewer = () => import('@frontend/components/pdf-viewer.vue')

工程

const PdfViewer = defineAsyncComponent(() => import('@frontend/components/pdf-viewer.vue'))

赞(0）回复(0）举报 2023-01-26

我来回答

vue.js 无效的VNode类型：undefined(未定义)-与〈component：is=“comp”>一起使用时

2条答案

相关问题

热门标签

最新问答