vue 動(dòng)態(tài)組件component
1、component
如何實(shí)現(xiàn)動(dòng)態(tài)組件渲染
vue提供了一個(gè)內(nèi)置的<component> ,專門用來(lái)實(shí)現(xiàn)動(dòng)態(tài)組件的渲染。
這個(gè)標(biāo)簽就相當(dāng)于一個(gè)占位符，需要使用is屬性指定綁定的組件
<button @click="comName = 'Left'">展示Left</button>
<button @click="comName = 'Right'">展示Right</button>
<div class="box">
<!-- 渲染Left組件和Right組件 -->
<!-- component組件是Vue內(nèi)置的 -->
<!-- is表示要渲染的組件的名字 -->
<component :is="comName"></component>
</div>
<script>
import Left from '@/compeonents/Left.vue'
import Right from '@/components/Right.vue'
export default {
components: {
Left,
Right
},
data() {
return {
//comName 表示要展示的組件的名字
comName: Left,
}
}
}
</script>
2、keep-alive
2.1存在的問(wèn)題
當(dāng)在Left組件中實(shí)現(xiàn)一個(gè)按鈕加一的功能，加一操作后切換組件，再切回來(lái)
如下是Left中加一功能
<div class="left-container">
<h3>Left 組件 ---- {{ count }}</h3>
<button @click="count += 1">+1</button>
</div>
<script>
export default {
data(){
return {
count: 0
}
}
}
</script>
操作，進(jìn)行加一操作后切換到right組件，再切換回來(lái)，發(fā)現(xiàn)組件中的數(shù)據(jù)被重寫初始化了
使用Vue的生命周期查看Left組件
如下是Left中添加生命周期函數(shù)
export default {
created() {
console.log('Left 組件被創(chuàng)建了！')
}，
destoryed(){
console.log('Left 組件被銷毀了~')
}
}
再次執(zhí)行上訴操作后，得到的結(jié)果如下：
存在的問(wèn)題： 在切換組件的同時(shí)會(huì)銷毀和創(chuàng)建組件，這樣每次切換到同一組件時(shí)得到的組件對(duì)象就不是同一個(gè)了，會(huì)重寫初始化數(shù)據(jù)
2.2使用keep-alive解決
keep-alive 組件也是Vue內(nèi)置的組件，可以直接使用
在App根組件中如下修改：
<keep-alive> <!-- keep-alive 可以把內(nèi)部的組件進(jìn)行緩存，而不是銷毀組件 --> <component :is="comName"></component> </keep-alive>
2.3keep-alive的生命周期
該生命周期，只有在組件使用了keep-alive時(shí)才能使用
deactivated當(dāng)組件被緩存時(shí)，自動(dòng)觸發(fā)
actived當(dāng)組件被激活時(shí)，自動(dòng)觸發(fā)
在Left組件中添加如下修改
//當(dāng)組件第一次被創(chuàng)建時(shí)，會(huì)先觸發(fā)created,后觸發(fā)activated
//當(dāng)組件被激活時(shí)，只會(huì)觸發(fā)activated，不觸發(fā)created
activated() {
console.log('組件被激活了，activated')
},
deactivated(){
console.log('組件被緩存了，deactivated')
}
2.4keep-alive 的 include, exclude屬性
keep-alive默認(rèn)會(huì)緩存所有被keep-alive包裹的component里的組件
如何指定需要緩存的組件呢：
使用include / exclude 屬性,不能同時(shí)使用
<keep-alive include="Left,MyRight"> <component :is="comName"></component> </keep-alive>
以上指定了需要緩存的組件名稱： 注意這里的組件的名稱
Left組件中：
export default{}
Right組件中：
export default{
//當(dāng)提供了name屬性后，組件的名稱就是name屬性的值
name: 'MyRight'
}
區(qū)分： 組件內(nèi)name屬性，和組件外注冊(cè)名 的關(guān)系
組件外：
import Left '@/components/Left.vue'
components: {
Left,
}
這里的注冊(cè)名只用于組件的引用，如果組件內(nèi)沒(méi)有name屬性那么name默認(rèn)就是注冊(cè)名
組件內(nèi)：
export default{
//當(dāng)提供了name屬性后，組件的名稱就是name屬性的值
name: 'MyRight'
}
組件內(nèi)聲明了name屬性該組件在調(diào)試工具中顯示的標(biāo)簽就是該名稱，標(biāo)簽中的緩存功能用到的也是該名稱
到此這篇關(guān)于 vue 動(dòng)態(tài)組件component 的文章就介紹到這了,更多相關(guān) vue 動(dòng)態(tài)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue項(xiàng)目部署之從本地到線上環(huán)境實(shí)踐
文章詳細(xì)介紹了如何將Vue項(xiàng)目從本地環(huán)境部署到線上服務(wù)器,包括打包本地項(xiàng)目、服務(wù)器環(huán)境搭建、項(xiàng)目上傳與配置以及解決部署后頁(yè)面訪問(wèn)異常問(wèn)題2026-02-02
VSCode搭建vue項(xiàng)目的實(shí)現(xiàn)步驟
本文主要介紹了VSCode搭建vue項(xiàng)目的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
過(guò)濾器vue.filters的使用方法實(shí)現(xiàn)
這篇文章主要介紹了過(guò)濾器vue.filters的使用方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue后臺(tái)管理如何配置動(dòng)態(tài)路由菜單
這篇文章主要介紹了vue后臺(tái)管理如何配置動(dòng)態(tài)路由菜單，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue解決element-ui消息提示$message重疊問(wèn)題
這篇文章主要為大家介紹了Vue解決element-ui消息提示$message重疊問(wèn)題,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue Element前端應(yīng)用開(kāi)發(fā)之菜單資源管理
在權(quán)限管理系統(tǒng)中，菜單也屬于權(quán)限控制的一個(gè)資源，屬于角色控制的一環(huán)。不同角色用戶，登錄系統(tǒng)后，出現(xiàn)的系統(tǒng)菜單是不同的。菜單結(jié)合路由集合，實(shí)現(xiàn)可訪問(wèn)路由的過(guò)濾，也就實(shí)現(xiàn)了對(duì)應(yīng)角色菜單的展示和可訪問(wèn)路由的控制。2021-05-05
在UniApp中實(shí)現(xiàn)App與H5頁(yè)面的跳轉(zhuǎn)及通信的代碼示例
在移動(dòng)應(yīng)用開(kāi)發(fā)中,內(nèi)嵌 H5 頁(yè)面或與外部網(wǎng)頁(yè)交互是常見(jiàn)需求,UniApp 作為跨平臺(tái)框架,提供了靈活的方式實(shí)現(xiàn) App 與 H5 的跳轉(zhuǎn)和雙向通信,本文將詳細(xì)講解實(shí)現(xiàn)方法,并提供可直接復(fù)用的代碼示例,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了Vue高級(jí)特性概念原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-03-03
加入購(gòu)物車，是一個(gè)登錄后的用戶 才能進(jìn)行的操作，所以需要進(jìn)行鑒權(quán)判斷，判斷用戶token是否存在，這篇文章主要介紹了Vue加入購(gòu)物車判斷token添加登錄提示,需要的朋友可以參考下2023-11-11
Vue引入路徑正確但一直報(bào)錯(cuò)問(wèn)題:Already included file name&n
這篇文章主要介紹了Vue引入路徑正確但一直報(bào)錯(cuò):Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12