vue3.0--组件模块系统

一、使用组件模块系统的步骤

• 1.引入组件
• 2.把引入的所有组件全部暴露出去
• 3.按需引入文件

二、组件模块系统的同步加载

**common.js**
import {defineAsyncComponent} from 'vue'
let A=defineAsyncComponent(()=>import("../components/comA"));
let B=defineAsyncComponent(()=>import("../components/comB"));
//暴露
export default{
   components:{
       A,B
   }
}

**App.vue**
 <div id="App">
   <v-home></v-home>
 </div>
 
import {defineAsyncComponent} from 'vue';
export default {
 name: 'App',
 components:{
   'v-home':defineAsyncComponent(()=>import('./components/Home')),
 },
}

**Home.vue**
<div id="Home">
   Home
   <A></A>
   <B></B>
</div>

//同步引入
import common from '../commonJS/common'
export default{
   name:"Home",
   components:common.components,
   mounted() {
       console.log(common);
   },
}

三、组件模块系统的异步加载

**common.js**
import {defineAsyncComponent} from 'vue'
let A=defineAsyncComponent(()=>import("../components/comA"));
let B=defineAsyncComponent(()=>import("../components/comB"));
window.modules={
   'A':A,
   'B':B
}

**App.vue**
 <div id="App">
   <v-home></v-home>
 </div>
 
import {defineAsyncComponent} from 'vue';
export default {
 name: 'App',
 components:{
   'v-home':defineAsyncComponent(()=>import('./components/Home')),
 },
}

**Home.vue**
<div id="Home">
   Home
   <v-A></v-A>
</div>

//异步引入
import {defineAsyncComponent} from 'vue'
export default{
   name:"Home",
   components:{
       'v-A':defineAsyncComponent(()=>{
           return new Promise((resolve,reject)=>{
               console.log(window.modules);
               resolve(window.modules["A"]);
           });
       }),
   },
}

**main.js**
//执行
import './commonJS/common';