Nuxt3使用动态组件＜component :is=“comp“ /＞

Nuxt3 通过使用<component/> 标签使用动态组件

在Nuxt3中在标签 <component :is=“hrdd”/>内直接引用组件名称不生效, 需要使用resolveComponent()函数将组件解析后再使用, 如下所示:

<template>
  <div>
    <component :is="hrdd" />
  </div>
</template>
<script setup>
const hrdd= resolveComponent('HrddCardModule'); 
</script>

可以很方便的实现动态切换

<template>
  <div>
    <component :is="isHrdd?hrdd:jtff" />
  </div>
</template>
<script setup>
const hrdd= resolveComponent('HrddCardModule'); 
const jtff= resolveComponent('JtffCardModule'); 
const isHrdd = false;
</script>