寫本篇文章之前其實也關注過vue中的一個關於加載動態組件is的API，最開始研究它只是用來實現一個tab切換的功能，使用起來也蠻不錯的。
is
預期：string | Object (組件的選項對象)
用於動態組件且基於 DOM 內模板的限制來工作。
示例：
<!-- 當 `currentView` 改變時，組件也跟着改變 -->
<component v-bind:is="currentView"></component>
至於用在tab切換中，大概就是：
<template>
<div>
<div>#動態組件實現tab切換效果#</div><br><br><br>
<nav>
<a href="javascript:void(0);" @click="toggleTabs('first');">{{first}}</a>
<a href="javascript:void(0);" @click="toggleTabs('second');">{{second}}</a>
<a href="javascript:void(0);" @click="toggleTabs('third');">{{third}}</a>
</nav>
<first :is="currentView" keep-alive></first>
</div>
</template>
<script>
import first from 'components/first';
import second from 'components/second';
import third from 'components/third';
export default {
data () {
return {
first: "first",
second: "second",
third: "third",
currentView: 'first',
};
},
components: {
first,
second,
third
},
methods: {
toggleTabs (tabText) {
this.currentView = tabText;
}
}
}
</script>
但是今天，一個前端同行在群里問我“如果當前頁面是根據傳進來的參數的不同而顯示不同的組件，而且當前頁面中可能會import進來幾十個子組件，而我又不想挨個去import這些組件，同時這些組件又是按需加載的，該咋實現？” 說實話，一開始我也懵了。
我在想，實在不行就用const demo = () => import ( './demo.vue')，或者在組件的components中按需引入：
components: {
demo: () => import ( './demo.vue')
}
但是我一想，也不對啊，這樣雖然能實現按需加載，但是還是要挨個import這些組件，還是沒有解決實際的問題。
經過查閱資料發現，vue有一個extend的方法可以實現。那么這個extend方法到底是干嘛的？
Vue.extend( options )
Vue.extend 返回的是一個“擴展實例構造器”,也就是預設了部分選項的Vue實例構造器。經常服務於Vue.component用來生成組件，可以簡單理解為當在模板中遇到該組件名稱作為標簽的自定義元素時，會自動調用“擴展實例構造器”來生成組件實例，並掛載到自定義元素上。
只是，extend創建的是一個組件構造器，而不是一個具體的組件實例，所以他不能直接在new Vue中使用。
使用Vue.extend創建的組件構造器最終是可以通過Vue.component注冊成全局組件或new實例化后注冊為局部組件。
接下來就來實現一下使用Vue.extend和Vue.component注冊全局組件：
import Vue from 'vue';
const globalComponent = Vue.extend({
template:"<p><a :href='url'>{{nama}}</a></p>",
data:function(){
return{
nama:'某度',
url:'http://www.moudu.com'
}
}
});
Vue.component('globalComponent', globalComponent);
使用這個全局注冊的組件：
<template>
<globalComponent />
</template>
也可以傳入一個選項對象，會自動調用Vue.extend：
const globalComponent = {
template:"<p><a :href='url'>{{nama}}</a></p>",
data(){
return{
nama:'某度',
url:'http://www.moudu.com'
}
}
};
Vue.component('globalComponent', globalComponent);
注冊全局組件還是很簡單的，但是有一個容易報錯的問題需要說明一下。
報錯的原因不是本文的重點，詳情可參考：
https://www.cnblogs.com/xiangxinhouse/p/8447507.html
https://blog.csdn.net/wxl1555/article/details/83187647
接下來就來實現根據傳參的不同加載不同組件的方法：
<template>
<button type="button" @click="toggle('test')">動態注冊組件<button>
<p><div ref="currentView"></div>
</template>
<script>
import Vue from 'vue'
export default {
data(){
return {}
},
methods: {
toggle(componentName){
this.registerComponent(componentName).then(Component => {
// new Component().$mount(this.$refs.currentView)
new Component({
el: this.$refs.currentView,
data: {
msg: "動態組件傳值"
}
})
})
},
registerComponent(componentName) {
return import(`@/views/${componentName}.vue`).then(component => {
return Vue.extend(component.default);
});
}
},
}
</script>
這樣，我們就可以根據動態傳入的參數，通過import(@/views/${componentName}.vue)來加載不同的組件，注意，import返回一個Promise對象，在Promise的then函數中就可以使用 Vue.extend(component.default)來創建一個組件的構造器，然后通過new關鍵字就可以實現局部注冊組件了。
還有一點需要說明：在實例化Vue.extend時，不光可以綁定el到具體的DOM節點，還可以定義要傳給子組件的參數data，在子組件可以直接通過this來拿到父組件傳過來的參數，如：
new Component({
el: this.$refs.currentView,
data: {
msg: "動態組件傳值"
}
})
子組件就可以通過this.msg拿到父組件傳過來的值，如果子組件本身在data中就已經定義了一個msg字段，那么父組件中定義的msg字段會覆蓋子組件中定義的msg字段。