vue動態註冊元件

陳小壞發表於2019-05-29
Vue元件

寫本篇文章之前其實也關注過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.components註冊成全域性元件或new例項化後註冊為區域性元件。

接下來就來實現以下使用Vue.extend和Vue.components註冊全域性元件：

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>

註冊全域性元件還是很簡單的，接下來就來實現根據傳參的不同載入不同元件的方法：

<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
        })
      })
    },
    registerComponent(componentName) {
      return import(`@/views/${componentName}.vue`).then(component => {
        return Vue.extend(component.default);
      });
    }
  },
}
</script>

這樣，我們就可以根據動態傳入的引數，通過import(@/views/${componentName}.vue)來載入不同的元件，注意import有一個回撥的方法，在該回撥中就可以使用 Vue.extend(component.default)來建立一個元件的構造器，然後通過new關鍵字就可以實現區域性註冊元件了。

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

相關文章