Nuxt3 中的动态组件

基础用法

Nuxt 3 中使用动态组件的方式和 Vue 3 中类似，主要有以下几种方式：

• 使用 v-if 指令
• 使用 <component> 标签
• 使用 resolveComponent 方法
• 声明全局组件

下面我们通过几个示例来介绍这些方式。

使用 if 指令

<script setup>
const isSwitched = ref(true);
</script>

<template>
  <div>
    <label>
      Switch to "AnotherDynamicComponent"?
      <input type="checkbox" v-model="isSwitched"/>
    </label>
    <DynamicComponent v-if="isSwitched"/>
    <AnotherDynamicComponent v-else/>
  </div>
</template>

通过控制 isComponentA 的值，可以动态切换组件 ComponentA 和 ComponentB。

使用 component 标签

在 Nuxt3 中可以使用 Vue 的内置 <component> 标签来实现动态组件：

<script setup>
import {DynamicComponent, AnotherDynamicComponent} from '#components';

const isSwitched = ref(true);
const componentToRender = computed(() => isSwitched.value
   ? DynamicComponent
   : AnotherDynamicComponent
);
</script>

<template>
  <div>
    <label>
      Switch to "AnotherDynamicComponent"?
      <input type="checkbox" v-model="isSwitched"/>
    </label>

    <component :is="componentToRender"/>
  </div>
</template>

将动态组件从 #components 中导入，可以确保组件在 Nuxt3 的组件注册系统中被正确识别和加载。

使用 resolveComponent

使用 resolveComponent 可以确保组件在 Nuxt3 的组件注册系统中被正确识别和加载。

另外也可以给组件添加 Lazy 前缀，这样在组件需要使用时才会被加载。

<script setup>
const isSwitched = ref(true);
const componentToRender = computed(() => isSwitched.value
   ? DynamicComponent
   : AnotherDynamicComponent
   ? resolveComponent('LazyDynamicComponent')
   : resolveComponent('LazyAnotherDynamicComponent')
);
</script>

<template>
  <div>
    <label>
      Switch to "LazyAnotherDynamicComponent"?
      <input type="checkbox" v-model="isSwitched"/>
    </label>

    <component :is="componentToRender"/>
  </div>
</template>

声明全局组件

Nuxt 3 中有下面两种方式修改组件为全局组件：

1. 在 components 目录下创建一个 global 文件夹，将组件放入其中
2. 组件名称以 .global.vue 结尾

比如使用下面的方式将组件声明为全局组件：

<script setup>
const isSwitched = ref(true);
const componentToRender = computed(() => isSwitched.value
   ? resolveComponent('LazyDynamicComponent')
   : resolveComponent('LazyAnotherDynamicComponent')
   ? 'LazyDynamicComponent' // 组件已经声明为全局组件，则不需要使用 resolveComponent 方法
   : 'LazyAnotherDynamicComponent' // 组件已经声明为全局组件，则不需要使用 resolveComponent 方法
);
</script>

<template>
  <div>
    <label>
      Switch to "LazyAnotherDynamicComponent"?
      <input type="checkbox" v-model="isSwitched"/>
    </label>

    <component :is="componentToRender"/>
  </div>
</template>

总结

Nuxt3 的动态组件为我们提供了强大的组件复用和条件渲染能力。

通过合理使用动态组件可以：

• 实现更灵活的组件切换
• 优化应用性能
• 提高代码可维护性

根据实际需求选择合适的实现方式，并注意处理好组件的加载状态和错误情况。