動態(tài)組件指的是動態(tài)切換組件的顯示與隱藏。 vue 提供了一個內(nèi)置的
data()?{??//1.當前要渲染的組件名稱??return?{?comName:'Left'}}<!--2.通過is屬性,動態(tài)指定要渲染的組件--><!--3.點擊按鈕,動態(tài)切換組件的名稱-->
默認情況下,vue切換動態(tài)組件時無法保持組件的狀態(tài)。此時可以使用 vue 內(nèi)置的 組件保持動態(tài)組件的狀態(tài),示例代碼如下:
??
keep-alive 對應(yīng)的生命周期函數(shù)
當組件被緩存時,會自動觸發(fā)組件的 deactivated 生命周期函數(shù)。當組件被激活時,會自動觸發(fā)組件的 activated 生命周期函數(shù)。
export?default?{??crkated(){?console.log('組件被創(chuàng)建了')?},??destroyed(){console.log('組件被銷毀了')},????activated(){console.log('Left組件被激活了!')},??deactivated(){console.log('Left組件被緩存了!')?}}
keep-alive 的 include 屬性
include 屬性用來指定:只有名稱匹配的組件會被緩存。多個組件名之間使用英文的逗號分隔:
??
Copyright ? 2013-2021 河南云和數(shù)據(jù)信息技術(shù)有限公司 豫ICP備14003305號 ISP經(jīng)營許可證:豫B-20160281