我无法在 Nuxt 3 中使用动态组件

Question

我尝试让它发挥作用

<component v-if="!pending" :is="dynComponent" />

在 Nuxt 2 中这没有问题，但在 Nuxt 3（Vue 3？）中似乎并不那么容易。

该变量dynComponent填充有进程过程中组件的名称 (myComponent)。

与 Nuxt 2 一样，我使用import myComponent from "@/layouts/myComponent.vue". 错误可能就在那里。

resolveComponent我在文档中读到需要使用助手。我也按照描述尝试过...但没有成功。(动态组件）

我也没有收到任何错误消息。什么都没发生。
有人可以解释一下如何在 Nuxt 3 中使用动态组件吗？

Answer 1

这就是您应该如何编写动态组件。

<script setup>
const yolo = resolveComponent('Yolo')
const bob = resolveComponent('Bob')
const boolean = ref(true)
</script>

<template>
  <div>
    <div>{{ boolean }}</div>
    <component :is="boolean ? yolo : bob" />
    <button @click="boolean = !boolean">toggle</button>
  </div>
</template>

有了这样的结构