vue動態(tài)子組件的兩種實現(xiàn)方式
更新時間：2019年09月01日 08:42:44 作者：風(fēng)雨后見彩虹
這篇文章主要介紹了vue動態(tài)子組件的兩種實現(xiàn)方式,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
文章目錄
- 方式一：局部注冊所需組件
- 使用緩存
- 方式二：動態(tài)注冊組件實現(xiàn)
讓多個組件使用同一個掛載點，并動態(tài)切換，這就是動態(tài)組件。
通過使用保留的 <component>元素，動態(tài)地綁定到它的 is 特性，可以實現(xiàn)動態(tài)組件。
方式一：局部注冊所需組件
<div id="example">
<button @click="change">切換頁面</button>
<component :is="currentView"></component>
</div>
<script>
var home = {template:'<div>我是主頁</div>'};
var post = {template:'<div>我是提交頁</div>'};
var archive = {template:'<div>我是存檔頁</div>'};
new Vue({
el: '#example',
components: {
home,
post,
archive,
},
data:{
index:0,
arr:['home','post','archive'],
},
computed:{
currentView(){
return this.arr[this.index];
}
},
methods:{
change(){
this.index = (++this.index)%3;
}
}
})
</script>
使用<keep-alive>緩存
<keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition>相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在父組件鏈中。
基本用法：
<div id="example"> <button @click="change">切換頁面</button> <keep-alive> <component :is="currentView"></component> </keep-alive> </div>
條件判斷
如果有多個條件性的子元素，<keep-alive> 要求同時只有一個子元素被渲染:
<div id="example">
<button @click="change">切換頁面</button>
<keep-alive>
<home v-if="index===0"></home>
<posts v-else-if="index===1"></posts>
<archive v-else></archive>
</keep-alive>
</div>
<script>
new Vue({
el: '#example',
components:{
home:{template:`<div>我是主頁</div>`},
posts:{template:`<div>我是提交頁</div>`},
archive:{template:`<div>我是存檔頁</div>`},
},
data:{
index:0,
},
methods:{
change(){
let len = Object.keys(this.$options.components).length;
this.index = (++this.index)%len;
}
}
})
</script>
activated 和 deactivated
activated 和 deactivated 在 <keep-alive> 樹內(nèi)的所有嵌套組件中觸發(fā):
<div id="example">
<button @click="change">切換頁面</button>
<keep-alive>
<component :is="currentView" @pass-data="getData"></component>
</keep-alive>
<p>{{msg}}</p>
</div>
<script>
new Vue({
el: '#example',
data:{
index:0,
msg:'',
arr:[
{
template:`<div>我是主頁</div>`,
activated(){
this.$emit('pass-data','主頁被添加');
},
deactivated(){
this.$emit('pass-data','主頁被移除');
},
},
{template:`<div>我是提交頁</div>`},
{template:`<div>我是存檔頁</div>`}
],
},
computed:{
currentView(){
return this.arr[this.index];
}
},
methods:{
change(){
var len = this.arr.length;
this.index = (++this.index)% len;
},
getData(value){
this.msg = value;
setTimeout(()=>{
this.msg = '';
},500)
}
}
})
</script>
include和exclude
include 和exclude屬性允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達式或一個數(shù)組來表示:
<!-- 逗號分隔字符串 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正則表達式 (使用 v-bind) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- Array (use v-bind) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>
匹配首先檢查組件自身name選項，如果name選項不可用，則匹配它的局部注冊名稱（父組件 components 選項的鍵值）。匿名組件不能被匹配。
<keep-alive include="home,archive"> <component :is="currentView"></component> </keep-alive>
上面的代碼，表示只緩存home和archive，不緩存posts
方式二：動態(tài)注冊組件實現(xiàn)
asyncComponents(templateName){
this.curNavComponents = require(`./components/${templateName}.vue`).default;
}
總結(jié)
以上所述是小編給大家介紹的vue動態(tài)子組件的兩種實現(xiàn)方式，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
本篇文章主要介紹了vue如何獲取點擊事件源的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
淺談Vue2.4.0 $attrs與inheritAttrs的具體使用
這篇文章主要介紹了淺談Vue2.4.0 $attrs與inheritAttrs的具體使用,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要為大家介紹了測試平臺開發(fā)vue組件化重構(gòu)前端代碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
第一次寫Vue項目，要用到router.js,看了一下官方文檔，還是很懵逼，不知道怎么配置，又去看視頻查資料，最后終于搞定了。話不多說，先上代碼，我再講一些要注意的細節(jié)2022-12-12
今天小編就為大家分享一篇解決vue-cli 打包后自定義動畫未執(zhí)行的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
基于Vue自定義指令實現(xiàn)按鈕級權(quán)限控制思路詳解
這篇文章主要介紹了基于vue自定義指令實現(xiàn)按鈕級權(quán)限控制,本文給大家介紹的非常詳細，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
el-table?選中行與復(fù)選框相互聯(lián)動的實現(xiàn)步驟
這篇文章主要介紹了el-table?選中行與復(fù)選框相互聯(lián)動,分為兩步，第一步點擊行時觸發(fā)復(fù)選框的選擇或取消，第二步點擊復(fù)選框時觸發(fā)相應(yīng)行的變化，本文通過實例代碼給大家詳細講解，需要的朋友可以參考下2022-10-10
Vue中使用vue-count-to(數(shù)字滾動插件)詳細教程
這篇文章主要給大家介紹了關(guān)于Vue中使用vue-count-to(數(shù)字滾動插件)的相關(guān)資料,最近需要開發(fā)一個數(shù)字滾動效果,在網(wǎng)上找到一個關(guān)于vue-countTo的插件,覺得這個插件還不錯,需要的朋友可以參考下2023-09-09
關(guān)于delete和Vue.delete的區(qū)別及說明
這篇文章主要介紹了關(guān)于delete和Vue.delete的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
使用Vue3+ts?開發(fā)ProTable源碼教程示例
這篇文章主要為大家介紹了使用Vue3+ts?開發(fā)ProTable源碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07