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

bksxznpy  于 2023-01-26  发布在  Vue.js
关注(0)|答案(2)|浏览(3114)

我已经在这个问题上停留了一段时间,没有在线信息。使用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处未定义
而且屏幕上什么都没有显示。你知道这个错误是什么意思/是什么原因吗?

3bygqnnd

3bygqnnd1#

您的问题是在is="div"中使用divcomponent中的: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>
vx6bjr1n

vx6bjr1n2#

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

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

工程

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

相关问题