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

data()?{??//1.當(dāng)前要渲染的組件名稱(chēng)??return?{?comName:'Left'}}<！--2.通過(guò)is屬性，動(dòng)態(tài)指定要渲染的組件--><！--3.點(diǎn)擊按鈕，動(dòng)態(tài)切換組件的名稱(chēng)-->展示?Left?組件展示?Right?組件

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

??

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

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

export?default?{??crkated(){?console.log('組件被創(chuàng)建了')?},??destroyed(){console.log('組件被銷(xiāo)毀了'）},????activated(){console.log('Left組件被激活了！'）},??deactivated(){console.log('Left組件被緩存了！')?}}

keep-alive 的 include 屬性

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

??