vue動態注冊組件

vue的架構思想，其實就是想按組件化開發，提升前端的模塊復用性，因此在開發過程中，組件的嵌套是很正常的需求。

例如以下需求：

在Index.vue頁面想調用組件A，A的頁面有兩種樣式，分別為B,和C，想在Index.vue調用兩個A組件，並且A組件包含有B和C樣式。

那么在開發的時候，我習慣把B和C的樣式和事件分別封裝為B組件和C組件，如下圖：

這個需求要求我們在Index.vue頁面傳遞參數給A組件，然后A組件通過參數決定是調用B組件還是C組件，代碼如下

Index.vue:

<template>
  <div class="Index">
   <div class="box"><A comChilds="C"></A></div>
    <div class="box"><A comChilds="B"></A></div>
  </div>
</template>

<script>
import A from "@/components/A";
export default {
  name: "Index",
  data() {
    return {
     
    };
  },
  components: {
    A: A
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.Index{width: 800px;border:solid 1px #000;display: flex;text-align: center}

.box{width: 300px;margin:10px 25px }
</style>

　　組件A的：

<template>
  <div>
    <div>父類組件A</div>
    <component :is="apps"></component>
  </div>
</template>
<script>
import Vue from "vue";
export default {
  name: "A",
  data() {
    return {
      Child: this.comChilds,
      apps: {}
    };
  },
  props: {
    comChilds: {
      type: String
    }
  },
  beforeMount() {
  
   this.apps=() => import('./common/' + this.Child + '.vue')
   
  }
};
</script>
<style scoped>
</style>

　　組件B：

<template>
    <div>我是A組件下的子組件B</div>
</template>
<script>
export default {
    
}
</script>
<style scoped>

</style>

　　組件C：

<template>
    <div>我是A組件下的子組件C</div>
</template>
<script>
export default {
    
}
</script>
<style scoped>

</style>

　　

 補充說明：

A組件中的：this.apps=() => import('./common/' + this.Child + '.vue')作用為：動態加載，可以使用

this.apps=resolve => require.ensure([], () => resolve(require('./common/' + this.Child + '.vue')));代替

也可以使用

this.apps=require("./common/"+this.Child+".vue").default代替

生命周期（鈎子）：beforeMount也可以使用created代替，可以查看VUE的API生命周期