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屬性允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達(dá)式或一個數(shù)組來表示:
<!-- 逗號分隔字符串 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正則表達(dá)式 (使用 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)文章
vue3中使用viewerjs實現(xiàn)圖片預(yù)覽效果的項目實踐
viewer.js是一款開源的圖片預(yù)覽插件,功能十分強大,本文主要介紹了vue3中使用viewerjs實現(xiàn)圖片預(yù)覽效果的項目實踐,具有一定的參考價值,感興趣的可以了解一下2023-09-09
vue復(fù)制內(nèi)容到剪切板代碼實現(xiàn)
這篇文章主要給大家介紹了關(guān)于vue復(fù)制內(nèi)容到剪切板代碼實現(xiàn)的相關(guān)資料,在Web應(yīng)用程序中剪貼板(Clipboard)操作是非常常見的操作之一,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了詳解vue中v-on事件監(jiān)聽指令的基本用法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了vue如何實現(xiàn)接口統(tǒng)一管理，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了VUE項目中封裝Echart折線圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了uniapp中uni-load-more的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了vue router 配置路由的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
基于element-ui對話框el-dialog初始化的校驗問題解決
這篇文章主要介紹了基于element-ui對話框el-dialog初始化的校驗問題解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue2.0與bootstrap3實現(xiàn)列表分頁效果
這篇文章主要為大家詳細(xì)介紹了vue2.0與bootstrap3實現(xiàn)列表分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
vue使用vue-json-viewer展示JSON數(shù)據(jù)的詳細(xì)步驟
最近在開發(fā)一個公司的投放管理系統(tǒng)的操作日志模塊,要查看某條操作日志的請求參數(shù),要將請求的參數(shù)以JSON格式的形式展示出來,下面這篇文章主要給大家介紹了vue使用vue-json-viewer展示JSON數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-09-09