Vue.extend動態註冊子組件

寫本篇文章以前其實也關注過vue中的一個關於加載動態組件is的API，最開始研究它只是用來實現一個tab切換的功能，使用起來也蠻不錯的。

is

預期：string | Object (組件的選項對象)
用於動態組件且基於 DOM 內模板的限制來工做。

示例：

<!-- 當 `currentView` 改變時，組件也跟着改變 -->
<component v-bind:is="currentView"></component>

詳見vue API中關於is的定義和用法

至於用在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);

註冊全局組件仍是很簡單的，可是有一個容易報錯的問題須要說明一下。

報錯的緣由不是本文的重點，詳情可參考：
http://www.javashuo.com/article/p-xpkvgdev-hd.html
http://www.javashuo.com/article/p-gxacsqmg-kp.html

接下來就來實現根據傳參的不一樣加載不一樣組件的方法：

<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字段。

本文參考：
Vue2.0 - 構造器的延伸 Vue.extend
vue extend 的基本使用