vue3引用组件 defineAsyncComponent

在Vue3中，`defineAsyncComponent`是一个特殊的方法，用于异步加载并注册组件。它允许你在模板中直接使用一个Promise返回的对象，这个对象在渲染时会被解析成一个正常的组件实例。这非常适合那些需要延迟加载或者从远程API动态获取的组件。

import { defineAsyncComponent } from 'vue';

// 使用 async 导入模块，返回 Promise 包裹组件工厂函数
const AsyncComponent = defineAsyncComponent(() => import('./YourComponent.vue'));

// 在模板中使用异步组件
<template>
  <div>
    <h1>Loading...</h1>
    <component :is="AsyncComponent"></component> <!-- v-bind:is 用于动态绑定组件名 -->
  </div>
</template>

<script setup>
// 当组件准备就绪时，它会被替换到 <component> 元素中
onMounted(async () => {
  await AsyncComponent; // 等待组件工厂函数返回的 Promise 解析
});
</script>

相关问题

场景：在vue3中组件被多次注册就会报Invalid VNode type: undefined (undefined)的错，导致页面空白。解决方式：引入 defineAsyncComponent 异步加载组件

在 Vue3 中，遇到 "Invalid VNode type: undefined (undefined)" 错误通常是由于尝试注册同名组件多次，尤其是在动态导入（async components）的情况下。Vue 期望每个组件只被创建一次，并通过引用它的唯一标识符来管理。当试图两次或更多次注册相同的异步组件时，由于组件还没有完成加载并分配给特定的标识，Vue 就无法识别它，从而抛出这个错误。

`defineAsyncComponent` 是 Vue3 提供的一种处理异步组件的方式，它允许你在需要的时候按需加载组件。当你需要一个组件在首次加载时并不立即渲染，而是延迟到第一次真正显示时才加载，这时可以使用 `defineAsyncComponent` 替换普通的 `component` 注册。这样做可以避免多次注册问题，因为每次组件实际被请求时，Vue 都会返回同一个实例。

解决步骤如下：

// 使用 defineAsyncComponent
import MyAsyncComponent from './MyComponent.vue';

export default {
  // 使用 async 和 function 来定义异步组件
  components: {
    MyAsyncComponent: () => import('./MyComponent.vue')
      .then((component) => component.default)
      .catch((err) => { console.error(err); throw err; }),
  },
};

vue3动态引入组件

Vue3中可以通过使用`defineAsyncComponent`方法来实现动态引入组件。具体写法如下：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => import('./components/MyComponent.vue'))

这样就可以在需要的时候动态加载`MyComponent.vue`组件了。使用`AsyncComp`即可引用该组件。

通过异步加载组件的方法，我们可以在某个事件触发后动态加载相应的组件，从而实现组件的动态渲染。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue3 —— 在vue中动态引入组件以及动态引入js的方法](https://blog.csdn.net/Bonsoir777/article/details/128217232)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [vue3动态加载组件](https://blog.csdn.net/qq_41839808/article/details/126932705)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]