Vue3动态导入组件，事件触发组件（按需引入）_vue3 动态引入组件

平时用的最多的都是静态（页面初始化的时候）导入组件，对于按需引入外部组件，还没有遇见过。常见的组件导入方法如下：

import VuePdfApp from 'vue3-pdf-app'
import LoginComponent from "@/components/loginComponent.vue";

这是常见的模板页面渲染组件 ：

<vue-pdf-app v-if="pdfUrl" :pdf="pdfUrl"></vue-pdf-app>

 这样导入组件的时候，对于页面加载速度会有影响，比如VuePdfApp这个组件M数较大，会影响页面的加载速度，用户体验感不是很好；这个时候就需要按需引入组件，在需要这个组件的时候再引入。

而对于按需引入组件的方法，如下图所示：

//vue 生命一个变量
let VuePdfApp=reactive({});
let pdfUrl=ref('');
 
/**
* 点击事件的时候才引入组件
**/
const clickBtn=()=>{
   //引入pdf组件
   VuePdfApp=defineAsyncComponent(()=>import('vue3-pdf-app'));
   pdfUrl.value='https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/Markdown.pdf';
}

此时模板渲染应为：

 <component v-if="pdfUrl" :is="VuePdfApp" :pdf="pdfUrl"></component>

传值方式不变  复用之前的传值即可

页面效果如图所示：