Vue v-slot
Nomlangan uyalarga murojaat qilish uchun bizga v-slot direktivasi kerak.
Nomlangan slotlar kontentning bola komponenti shablonida qayerga joylashtirilishini ko‘proq nazorat qilish imkonini beradi.
Nomlangan uyalar yanada moslashuvchan va qayta foydalanish mumkin bo‘lgan komponentlarni yaratish uchun ishlatilishi mumkin.
V-slot va nomli slotlardan foydalanishdan oldin, agar komponentda ikkita slotdan foydalansak nima bo‘lishini ko‘rib chiqamiz:
Misol
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>'Hello!'</slot-comp>
SlotComp.vue:
<h3>Component</h3>
<div>
<slot></slot>
</div>
<div>
<slot></slot>
</div>
Komponentdagi ikkita uyasi bilan kontent oddiygina ikkala joyda ham paydo bo‘lishini ko‘rishimiz mumkin.
v-uyasi va Nomlangan uyalar
Agar komponentda bir nechta <slot> bo‘lsa-yu, lekin qaysi <slot> tarkibda ko‘rinishini nazorat qilmoqchi bo‘lsak, biz slotlarni nomlashimiz va kontentni kerakli joyga yuborish uchun v-slot dan foydalanishimiz kerak.
Misol
Slotlarni farqlash uchun biz uyalarga turli nomlar beramiz.
SlotComp.vue:
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
Va endi biz kontentni to‘g‘ri uyaga yo‘naltirish uchun App.vue-dagi v-slotdan foydalanishimiz mumkin.
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>
Standart uyalar
Agar sizda nomsiz <slot> bo‘lsa, bu <slot> v-slot:default bilan belgilangan komponentlar yoki v-slot bilan belgilanmagan komponentlar uchun standart bo‘ladi.
Bu qanday ishlashini ko‘rish uchun biz avvalgi misolimizda ikkita kichik o‘zgartirish kiritishimiz kerak:
Misol
SlotComp.vue:
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>
Yuqorida aytib o‘tganimizdek, kontentning standart slotga tegishli ekanligini yanada aniqroq qilish uchun biz kontentni standart qiymati v-slot:default bilan belgilashimiz mumkin.
Misol
SlotComp.vue:
<h3>Component</h3>
<div>
<slot></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:default>'Default slot'</slot-comp>
ichidagi v-slot
Ko‘rib turganingizdek, v-slot direktivasi komponent tegida atribut sifatida ishlatilishi mumkin.
v-slot kontentning kattaroq qismlarini ma’lum <slot> ga yo‘naltirish uchun <template> tegida ham foydalanish mumkin.
Misol
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>
<template v-slot:bottomSlot>
<h4>To the bottom slot!</h4>
<p>This p tag and the h4 tag above are directed to the bottom slot with the v-slot directive used on the template tag.</p>
</template>
<p>This goes into the default slot</p>
</slot-comp>
SlotComp.vue:
<h3>Component</h3>
<div>
<slot></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
Biz <template> tegidan ba’zi kontentni ma’lum <slot> ga yo‘naltirish uchun foydalanamiz, chunki <template> yorlig‘i ko‘rsatilmaydi, u faqat kontent uchun joy ushlagichdir. Buni qurilgan sahifani tekshirish orqali ko‘rishingiz mumkin: u erda shablon (template) tegini topa olmaysiz.
v-slot stenografiya #
v-slot: direktivasining qisqa shakli — #.
Bu shuni anglatadiki:
<slot-comp v-slot:topSlot>'Hello!'</slot-comp>
Quyidagi kabi yozilishi mumkin:
<slot-comp #topSlot>'Hello!'</slot-comp>
Misol
App.vue:
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp #topSlot>'Hello!'</slot-comp>
SlotComp.vue:
<h3>Component</h3>
<div>
<slot name="topSlot"></slot>
</div>
<div>
<slot name="bottomSlot"></slot>
</div>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!