Vue動態(tài)組件渲染是怎么實現(xiàn)的?

動態(tài)組件指的是動態(tài)切換組件的顯示與隱藏。 vue 提供了一個內(nèi)置的<component>組件，專門用來實現(xiàn)動態(tài)組件的渲染。示例代碼如下：

data() {
  //1.當(dāng)前要渲染的組件名稱
  return { comName:'Left'}
}

<！--2.通過is屬性，動態(tài)指定要渲染的組件-->
<component 
:is="comName"></component>

<！--3.點擊按鈕，動態(tài)切換組件的名稱-->
<button @click="comName='Left'">展示 
Left 組件</button>
<button @click="comName='Right'">展示 Right 
組件</button>

<keep-alive>
  <component :is="comName"></component>
</keep-alive>

當(dāng)組件被緩存時，會自動觸發(fā)組件的 deactivated 生命周期函數(shù)。當(dāng)組件被激活時，會自動觸發(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 屬性用來指定：只有名稱匹配的組件會被緩存。多個組件名之間使用英文的逗號分隔：

<keep-alive include="MyLeft,MyRight">
  <component :is="comName"></component>
</keep-alive>