vue動態(tài)注冊組件實例代碼詳解

更新時間：2019年05月30日 10:26:45 作者：陳小壞

寫本篇文章之前其實也關(guān)注過vue中的一個關(guān)于加載動態(tài)組件is的API，最開始研究它只是用來實現(xiàn)一個tab切換的功能,需要的朋友可以參考下

寫本篇文章之前其實也關(guān)注過vue中的一個關(guān)于加載動態(tài)組件is的API，最開始研究它只是用來實現(xiàn)一個tab切換的功能，使用起來也蠻不錯的。

is

預(yù)期：string | Object (組件的選項對象)

用于動態(tài)組件且基于 DOM 內(nèi)模板的限制來工作。

示例：

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

詳見vue API中關(guān)于is的定義和用法

至于用在tab切換中，大概就是：

<template>
 <div>
 　　<div>#動態(tài)組件實現(xiàn)tab切換效果#</div><br><br><br>
 　　　　<nav>
 　　　　　　<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(first);">{{first}}</a>
   　 　　<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(second);">{{second}}</a>
   　　　 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @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>

但是今天，一個前端同行在群里問我“如果當前頁面是根據(jù)傳進來的參數(shù)的不同而顯示不同的組件，而且當前頁面中可能會import進來幾十個子組件，而我又不想挨個去import這些組件，同時這些組件又是按需加載的，該咋實現(xiàn)？” 說實話，一開始我也懵了。

我在想，實在不行就用const demo = () => import ( './demo.vue')，或者在組件的components:中按需引入：

components: {
 demo: () => import ( './demo.vue')
}

但是我一想，也不對啊，這樣雖然能實現(xiàn)按需加載，但是還是要挨個import這些組件，還是沒有解決實際的問題。

經(jīng)過查閱資料發(fā)現(xiàn)，vue有一個extend的方法可以實現(xiàn)。那么這個extend方法到底是干嘛的？

Vue.extend( options )

Vue.extend 返回的是一個“擴展實例構(gòu)造器”,也就是預(yù)設(shè)了部分選項的Vue實例構(gòu)造器。經(jīng)常服務(wù)于Vue.component用來生成組件，可以簡單理解為當在模板中遇到該組件名稱作為標簽的自定義元素時，會自動調(diào)用“擴展實例構(gòu)造器”來生成組件實例，并掛載到自定義元素上。

只是，extend創(chuàng)建的是一個組件構(gòu)造器，而不是一個具體的組件實例，所以他不能直接在new Vue中這樣使用。

使用Vue.extend創(chuàng)建的組件構(gòu)造器最終是可以通過Vue.components注冊成全局組件或new實例化后注冊為局部組件。

接下來就來實現(xiàn)以下使用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>

注冊全局組件還是很簡單的，接下來就來實現(xiàn)根據(jù)傳參的不同加載不同組件的方法：

<template>
 <button type="button" @click="toggle('test')">動態(tài)注冊組件<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>

這樣，我們就可以根據(jù)動態(tài)傳入的參數(shù)，通過import( @/views/${componentName}.vue )來加載不同的組件，注意import有一個回調(diào)的方法，在該回調(diào)中就可以使用 Vue.extend(component.default)來創(chuàng)建一個組件的構(gòu)造器，然后通過new關(guān)鍵字就可以實現(xiàn)局部注冊組件了。

總結(jié)

以上所述是小編給大家介紹的vue動態(tài)注冊組件實例代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: