平时用的最多的都是静态(页面初始化的时候)导入组件,对于按需引入外部组件,还没有遇见过。常见的组件导入方法如下:
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>
传值方式不变 复用之前的传值即可
页面效果如图所示: