Vue <KeepAlive> 元件
示例
使用內建的 <KeepAlive> 元件來保持元件中之前輸入的表單資料
<KeepAlive>
<component :is="activeComp"></component>
</KeepAlive>
更多示例請參見下方。
定義和用法
內建的 <KeepAlive> 元件用於包裹動態元件，當元件不活躍時對其進行快取，從而保持其狀態。
Props
該 <KeepAlive> 元件可以與不同的 prop 一起使用，以便我們指定哪些元件應該被快取，從而保持其狀態。
| Prop | 描述 | |
|---|---|---|
| none | 快取所有元件，以保持其狀態 | 執行示例 » |
| include | 可選。指定需要保持狀態的元件的名稱 | 執行示例 » |
| exclude | 可選。指定不需要保持狀態的元件的名稱 | 執行示例 » |
| max | 可選。指定需要保持狀態的元件的最大數量。如果您指定最多快取 4 個元件，那麼將被快取的是最近訪問的 4 個元件。 | 執行示例 » |
<KeepAlive> 快取元件的生命週期
透過內建的 <KeepAlive> 元件快取的元件，在它們被設定為或未設定為活動動態元件時，會在 activated 和 deactivated 狀態之間切換。
當這種快取的元件被設定為或未設定為活動元件時，可以使用 activated() 和 deactivated() 生命週期鉤子來執行程式碼。
更多示例
示例
使用 include prop 指定哪些元件將快取值
<KeepAlive include="CompOne,CompThree">
<component :is="activeComp"></component>
</KeepAlive>
示例
使用 exclude prop 指定哪些元件不快取值
<KeepAlive exclude="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
示例
使用 max prop 指定最後訪問的多少個元件將快取值
<KeepAlive :max="2">
<component :is="activeComp"></component>
</KeepAlive>
相關頁面
Vue 教程：動態元件
Vue 教程：“activated”和“deactivated”生命週期鉤子
