Vue dinamik komponentlar
Dinamik komponentlar brauzeringizdagi yorliqlar kabi sahifangizdagi sahifalarni "is" atributidan foydalangan holda aylantirish uchun ishlatilishi mumkin.
Komponent tegi va "is" atributi
Dinamik komponentni yaratish uchun biz faol komponentni ifodalash uchun <component> tegidan foydalanamiz. 'is' atributi v-bind qiymatiga bog‘langan va biz bu qiymatni faol bo‘lishini istagan komponent nomiga o‘zgartiramiz.
Misol
Ushbu misolda bizda <component> tegi bor, u comp-one komponenti yoki comp-two komponenti uchun to‘ldiruvchi vazifasini bajaradi. 'is' atributi <component> tegida o‘rnatiladi va qiymat sifatida 'komp-bir' yoki 'komp-ikki' ni ushlab turadigan 'activeComp' hisoblangan qiymatini tinglaydi. Va bizda faol komponentlar o‘rtasida hisoblangan qiymatni almashtirish uchun ma’lumotlar xususiyatini "to‘g‘ri" va "noto‘g‘ri" o‘rtasida almashtiruvchi tugma mavjud.
App.vue:
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<component :is="activeComp"></component>
</template>
<script>
export default {
data() {
return {
toggleValue: true
}
},
computed: {
activeComp() {
if(this.toggleValue) {
return 'comp-one'
}
else {
return 'comp-two'
}
}
}
}
</script>
Quyidagi misolni bajaring. Qayta o‘tganingizda, bitta komponentda kiritilgan o‘zgarishlar unutilganini sezasiz. Buning sababi, komponent o‘chirilgan va qayta o‘rnatilgan bo‘lib, komponent qayta yuklanadi.
Misol
Ushbu misol oldingi misol bilan bir xil, faqat komponentlar boshqacha. Birinchi komplektda siz "Olma" va "Cake" o‘rtasida tanlov qilishingiz mumkin, ikkinchisida esa xabar yozishingiz mumkin. Komponentga qaytganingizda ma’lumotlaringiz yo‘qoladi.
Misolni ishga tushirish »Oldingi kiritilgan ma’lumotlarning holatini saqlab qolish uchun komponentga qaytishda biz <component> tegi atrofida <KeepAlive> tegidan foydalanamiz.
Misol
Endi komponentlar foydalanuvchi kiritishlarini eslab qoladi.
App.vue:
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive>
<component :is="activeComp"></component>
</KeepAlive>
</template>
"O‘z ichiga" va "tashqariga chiqarish" atributlari
<KeepAlive> yorlig‘i ichidagi barcha komponentlar sukut bo‘yicha saqlanib qoladi.
Lekin biz <KeepAlive> tegidagi "include" yoki "chischilatish" atributlaridan foydalangan holda faqat ba’zi bir komponentlarni saqlab qolishimiz mumkin.
Agar biz <KeepAlive> tegida "include" yoki "exclude" atributlaridan foydalansak, "nom" varianti bilan komponentlar nomlarini ham berishimiz kerak:
CompOne.vue:
<script>
export default {
name: 'CompOne',
data() {
return {
imgSrc: 'img_question.svg'
}
}
}
</script>
Misol
<KeepAlive include="CompOne"> bilan faqat 'CompOne' komponenti uning holatini, oldingi kirishlarni eslab qoladi.
App.vue:
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive include="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
</template>
Qaysi komponentlarni saqlab qolish yoki saqlamaslikni tanlash uchun biz "chiqib chiqarish" dan ham foydalanishimiz mumkin.
Misol
<KeepAlive exclude="CompOne"> bilan faqat "CompTwo" komponenti uning holatini eslab qoladi.
App.vue:
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive exclude="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
</template>
"O‘z ichiga" va "tashqariga qo‘yish" ikkalasi ham vergul bilan ajratish orqali bir nechta komponentlar bilan ishlatilishi mumkin.
Buni ko‘rsatish uchun biz yana bitta komponentni qo‘shamiz, shunda biz jami uchta komponentni olamiz.
Misol
<KeepAlive include="CompOne, CompThree"> bilan "CompOne" va "CompThree" komponentlari o‘z holatini eslab qoladi.
App.vue:
<template>
<h1>Dynamic Components</h1>
<button @click="compNbr++">
Next component
</button>
<KeepAlive include="CompOne,CompThree">
<component :is="activeComp"></component>
</KeepAlive>
</template>
"Maksimal" atributi
Brauzer holatini eslab qolishi kerak bo‘lgan komponentlar sonini cheklash uchun biz <KeepAlive> tegining atributi sifatida "max" dan foydalanishimiz mumkin.
Misol
<KeepAlive :max="2"> bilan brauzer faqat oxirgi ikki tashrif buyurilgan komponentning foydalanuvchi kiritishini eslab qoladi.
App.vue:
<template>
<h1>Dynamic Components</h1>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-one'"> One</label>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-two'"> Two</label>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-three'"> Three</label>
<KeepAlive :max="2">
<component :is="activeComp"></component>
</KeepAlive>
</template>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!