溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
寫本篇文章之前其實也關注過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);" 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>
但是今天，一個前端同行在群里問我“如果當前頁面是根據傳進來的參數的不同而顯示不同的組件，而且當前頁面中可能會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關鍵字就可以實現局部注冊組件了。
總結
以上所述是小編給大家介紹的vue動態注冊組件實例代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
