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