Vue中的動(dòng)態(tài)組件怎么實(shí)現(xiàn)渲染

本篇內(nèi)容介紹了“Vue中的動(dòng)態(tài)組件怎么實(shí)現(xiàn)渲染”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1、什么是動(dòng)態(tài)組件

動(dòng)態(tài)組件指的是動(dòng)態(tài)切換組件的顯示與隱藏。

2、如何實(shí)現(xiàn)動(dòng)態(tài)組件渲染

vue 提供了一個(gè)內(nèi)置的 <component> 組件，專(zhuān)門(mén)用來(lái)實(shí)現(xiàn)動(dòng)態(tài)組件的渲染。示例代碼如下：

3、使用 keep-alive 保持狀態(tài)

默認(rèn)情況下，切換動(dòng)態(tài)組件時(shí)無(wú)法保持組件的狀態(tài)。此時(shí)可以使用vue 內(nèi)置的 <keep-alive> 組件保持動(dòng)態(tài)組件的狀態(tài)。示例代碼如下：

4、keep-alive 對(duì)應(yīng)的生命周期函數(shù)

• 當(dāng)組件被緩存時(shí)，會(huì)自動(dòng)觸發(fā)組件的 deactivated 生命周期函數(shù)。

• 當(dāng)組件被激活時(shí)，會(huì)自動(dòng)觸發(fā)組件的 activated 生命周期函數(shù)。

示例代碼如下：

溫馨提醒：

• keep-alive 會(huì)把內(nèi)部的組件進(jìn)行緩存，而不是銷(xiāo)毀組件；

• 使用 keep-alive 的時(shí)候，可以通過(guò) include 指定哪些組件需要被緩存；或者，通過(guò) exclude 屬性指定哪些組件不需要被緩存；但是：不要同時(shí)使用 include 和 exclude 這兩個(gè)屬性；

5、keep-alive 的 include 屬性

include 屬性用來(lái)指定：只有名稱(chēng)匹配的組件會(huì)被緩存。多個(gè)組件名之間使用英文的逗號(hào)分隔:

示例代碼如下：

“Vue中的動(dòng)態(tài)組件怎么實(shí)現(xiàn)渲染”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！