<KeepAlive>
Misol
Komponentlar foydalanuvchi avval kiritgan ma’lumotlarni saqlab qolishi uchun o‘rnatilgan <KeepAlive> komponentidan foydalanish:
<KeepAlive>
<component :is="activeComp"></component>
</KeepAlive>
Quyida ko‘proq misollarni ko‘ring.
Ta’rif va qo‘llanilishi
O‘rnatilgan <KeepAlive> komponenti dinamik komponentlarni o‘rab olib, ular faol bo‘lmaganda ularni keshlash uchun ishlatiladi, shunda ularning state’i saqlanib qoladi.
Props
<KeepAlive> komponenti turli props bilan birgalikda ishlatilishi mumkin, shunda qaysi komponentlar o‘z state’ini saqlab qolishi uchun keshlanishi kerakligini belgilashimiz mumkin.
| Prop | Tavsif | |
|---|---|---|
| none | Barcha komponentlar keshlanadi, shunda ularning state’i saqlanib qoladi | Misolni ishga tushirish » |
| include | Ixtiyoriy. O‘z state’ini saqlab qolishi kerak bo‘lgan komponentlarning nomlarini ko‘rsating | Misolni ishga tushirish » |
| exclude | Ixtiyoriy. O‘z state’ini saqlamasligi kerak bo‘lgan komponentlarning nomlarini ko‘rsating | Misolni ishga tushirish » |
| max | Ixtiyoriy. O‘z state’ini saqlab qolishi kerak bo‘lgan komponentlarning maksimal sonini belgilang. Agar ko‘pi bilan 4 ta komponentni keshlashni belgilasangiz, oxirgi ko‘rilgan 4 ta komponent keshlanadi. | Misolni ishga tushirish » |
bilan keshlangan komponentlarning lifecycle
O‘rnatilgan <KeepAlive> komponenti bilan keshlangan komponentlar faol dinamik komponent sifatida belgilanganda yoki belgilanmaganda activated va deactivated holatlari o‘rtasida almashinadi.
activated() va deactivated() lifecycle (hayotiy sikl) hook’lari bunday keshlangan komponent faol komponent sifatida belgilanganda yoki bu holatdan chiqqanda kodni ishga tushirish uchun ishlatilishi mumkin.
Ko‘proq misollar
Misol
Qaysi komponentlar qiymatlarni keshlashini belgilash uchun include prop’idan foydalanish:
<KeepAlive include="CompOne,CompThree">
<component :is="activeComp"></component>
</KeepAlive>
Misol
Qaysi komponentlar qiymatlarni keshlamasligini belgilash uchun exclude prop’idan foydalanish:
<KeepAlive exclude="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
Misol
Oxirgi ko‘rilgan komponentlardan nechtasi qiymatlarni keshlashini belgilash uchun max prop’idan foydalanish:
<KeepAlive :max="2">
<component :is="activeComp"></component>
</KeepAlive>
Tegishli sahifalar
Vue darsligi: Dinamik komponentlar
Vue darsligi: "activated" va "deactivated" lifecycle hook’lari
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!