Vue動(dòng)態(tài)組件和keep-alive組件實(shí)例詳解
動(dòng)態(tài)組件
多個(gè)組件使用同一個(gè)掛載點(diǎn)，并可以動(dòng)態(tài)切換，這就是動(dòng)態(tài)組件。
格式
<component :is="comName"></component>
注意點(diǎn)
- is只能是動(dòng)態(tài)屬性，:is="組件注冊(cè)后的標(biāo)簽名字符串或data變量"
- 不能直接拿注冊(cè)標(biāo)簽名賦值使用
使用效果
需求: 完成一個(gè)注冊(cè)功能頁(yè)面, 2個(gè)按鈕切換, 額外封裝兩個(gè)組件：一個(gè)填寫(xiě)注冊(cè)信息, 一個(gè)填寫(xiě)用戶簡(jiǎn)介信息。
目錄結(jié)構(gòu)
根組件
├── App.vue
└── components
├── UserName.vue # 用戶名和密碼輸入框
└── UserInfo.vue # 人生格言和自我介紹框操作
UserName.vue
<template>
<div>
<h2>UserName</h2>
<p>用戶名:<input /> </p>
<p>密碼:<input /> </p>
</div>
</template>
<script>
export default {
}
</script>UserInfo.vue
<template>
<div>
<h2>UserInfo.vue</h2>
<p>人生格言:<input /> </p>
<p>自我介紹:<textarea /> </p>
</div>
</template>
<script>
export default {
}
</script>父組件APP.vue
<template>
<div>
<button @click="comName = 'UserName'">賬號(hào)密碼填寫(xiě)</button>
<button @click="comName = 'UserInfo'">個(gè)人信息填寫(xiě)</button>
<p>下面顯示注冊(cè)組件:</p>
<div style="border: 1px solid red">
<!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 -->
<component :is="comName"></component>
</div>
</div>
</template>
<script>
import UserName from "./UserName";
import UserInfo from "./UserInfo";
export default {
data() {
return {
comName: "UserName",
};
},
components: {
UserName,
UserInfo,
},
};
</script>效果
小結(jié)
vue內(nèi)置component組件, 配合is屬性, 設(shè)置要顯示的組件標(biāo)簽名字。
keep-alive組件
使用背景
組件切換會(huì)導(dǎo)致組件被頻繁銷(xiāo)毀和重新創(chuàng)建, 大多數(shù)情況下是有自己的意義的，但也可能會(huì)導(dǎo)致不必要的性能損耗。
解決方法
使用Vue內(nèi)置的keep-alive組件, 可以讓包裹的組件保存在內(nèi)存中不被銷(xiāo)毀。
使用keep-alive組件
<keep-alive>
<!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 -->
<component :is="comName"></component>
</keep-alive>使用keep-alive組件會(huì)補(bǔ)充兩個(gè)生命周期：
- activated -激活
- deactivated -失去激活狀態(tài)
小結(jié)
keep-alive可以提高組件的性能, 內(nèi)部包裹的標(biāo)簽不會(huì)被銷(xiāo)毀和重新創(chuàng)建, 觸發(fā)激活和非激活的生命周期方法。
keep-alive組件-指定緩存
keep-alive默認(rèn)會(huì)將所有包裹的組件進(jìn)行緩存，使用include屬性可以指定緩存組件。
語(yǔ)法
- 寫(xiě)法1： include="組件名1,組件名2..."
- 寫(xiě)法2： :include="['組件名1'， '組件名2']"
<keep-alive include="name1,name2">
<!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 -->
<component :is="comName"></component>
</keep-alive>注意：
匹配首先檢查組件自身的 name 選項(xiàng)，如果 name 選項(xiàng)不可用，則匹配它的局部注冊(cè)名稱(chēng) (父組件 components 選項(xiàng)的鍵值)。
總結(jié)
到此這篇關(guān)于Vue動(dòng)態(tài)組件和keep-alive組件的文章就介紹到這了,更多相關(guān)Vue動(dòng)態(tài)組件 keep-alive組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于Vue3中element-plus的el-dialog對(duì)話框無(wú)法顯示的問(wèn)題及解決方法
最近今天在寫(xiě)一個(gè)停車(chē)場(chǎng)管理系統(tǒng)的項(xiàng)目時(shí),在用vue3寫(xiě)前端時(shí),在前端模板選擇上,我一時(shí)腦抽,突然決定放棄SpringBoot,選擇了以前幾乎很少用的element-plus,然后果不其然,錯(cuò)誤連連,下面給大家分享dialog對(duì)話框無(wú)法顯示的原因,感興趣的朋友一起看看吧2023-10-10
vue前端實(shí)現(xiàn)dhtmlxgantt甘特圖代碼示例(個(gè)人需求)
這篇文章主要介紹了如何使用dhtmlx-gantt和chinese-days插件在項(xiàng)目中實(shí)現(xiàn)節(jié)假日置灰顯示的功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
Vue3和Electron實(shí)現(xiàn)桌面端應(yīng)用詳解
本文主要介紹了Vue3和Electron實(shí)現(xiàn)桌面端應(yīng)用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
vite.config.ts如何加載.env環(huán)境變量
這篇文章主要介紹了vite.config.ts加載.env環(huán)境變量方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
解決Element-ui radio單選框label布爾/數(shù)值的一個(gè)坑
這篇文章主要介紹了解決Element-ui radio單選框label布爾/數(shù)值的一個(gè)坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue屬性props默認(rèn)類(lèi)型的寫(xiě)法介紹
這篇文章主要介紹了vue屬性props默認(rèn)類(lèi)型的寫(xiě)法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+elementUI中el-radio設(shè)置默認(rèn)值方式
這篇文章主要介紹了vue+elementUI中el-radio設(shè)置默認(rèn)值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
基于cropper.js封裝vue實(shí)現(xiàn)在線圖片裁剪組件功能
這篇文章主要介紹了基于cropper.js封裝vue實(shí)現(xiàn)在線圖片裁剪組件功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-03-03
Vue.js計(jì)算屬性的變化監(jiān)聽(tīng)的示例詳解
在Vue.js中,計(jì)算屬性（computed properties）是組件的重要組成部分,它們根據(jù)組件的數(shù)據(jù)自動(dòng)計(jì)算新的值,并在數(shù)據(jù)變化時(shí)自動(dòng)更新,本文將深入探討如何在Vue.js中監(jiān)聽(tīng)計(jì)算屬性的變化,幫助你更好地理解Vue.js的響應(yīng)式系統(tǒng),需要的朋友可以參考下2025-03-03
本篇文章主要介紹了詳解在Vue中有條件地使用CSS類(lèi)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09