v-slot
Misol
v-slot direktivasidan foydalanib, 'Hello!' xabarini <slot-comp> komponentidagi 'bottomSlot' nomli slotga yuborish.
<slot-comp v-slot:bottomSlot>'Hello!'</slot-comp>
Quyida ko‘proq misollarni ko‘ring.
Ta’rif va qo‘llanilishi
v-slot direktivasi kontentni nomlangan slotga yo‘naltirish uchun ishlatiladi.
v-slot: direktivasining qisqa shakli — #.
v-slot direktivasi, shuningdek, bola komponentda v-bind yordamida taqdim etiladigan scoped slotlardan ma’lumot olish uchun ham ishlatilishi mumkin.
v-slot komponentlarda yoki o‘rnatilgan <template> elementida ishlatilishi mumkin.
v-slot komponentdagi bir nechta slotga kontent tayinlamoqchi bo‘lganimizda <template> elementlarida ishlatiladi.
Ko‘proq misollar
1-misol
Bitta komponentdagi ikkita turli slotga kontent tayinlash uchun <template> elementlarida v-slot’dan foydalanish.
App.vue:
<template>
<h1>App.vue</h1>
<p>The component has two slots, and the template element is used to assign content to both.</p>
<slot-comp>
<template v-slot:topSlot>
<div>
<p>Tigers are beautiful!</p>
<img src="tiger.svg" alt="tiger" width="100">
</div>
</template>
<template v-slot:bottomSlot>
<div>
<p>Whales can be very big</p>
</div>
</template>
</slot-comp>
</template>
SlotComp.vue:
<template>
<hr>
<h3>Component</h3>
<slot name="topSlot"></slot>
<slot name="bottomSlot"></slot>
</template>
2-misol
Kontentni standart (default) slotga yo‘naltirish uchun v-slot’dan foydalanish.
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>
3-misol
v-slot: direktivasining qisqa shakli — # dan foydalanish.
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>
4-misol
Scoped slotdan ma’lumot olish uchun v-slot’dan foydalanish.
App.vue:
<slot-comp v-slot:"dataFromSlot">
<h2>{{ dataFromSlot.lclData }}</h2>
</slot-comp>
Tegishli sahifalar
Vue darsligi: Vue slotlar
Vue darsligi: Scoped slotlar
Vue darsligi: Vue komponentlari
Vue darsligi: Vue v-slot
Vue ma’lumotnomasi: Vue Element elementi
Vue ma’lumotnomasi: Vue $slots obyekti
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!