Vue scoped slotlar
Scoped uyasi komponentdan mahalliy ma’lumotlarni taqdim etadi, shunda ota-ona uni qanday ko‘rsatishni tanlashi mumkin.
Ma’lumotlarni ota-onaga yuborish
Mahalliy ma’lumotlarni ota-onaga yuborish uchun komponent uyasida v-bind dan foydalanamiz:
SlotComp.vue:
<template>
<slot v-bind:lclData="data"></slot>
</template>
<script>
export default {
data() {
return {
data: 'This is local data'
}
}
}
</script>
Komponent ichidagi ma’lumotlarni "mahalliy" deb atash mumkin, chunki u ota-onaga kirish imkoni yo‘q, agar u bu yerda v-bind bilan yuborilgandek ota-onaga yuborilmasa.
Scoped Slotdan ma’lumotlarni qabul qilish
Komponentdagi mahalliy ma’lumotlar v-bind bilan yuboriladi va uni v-slot bilan ota-onada olish mumkin:
Misol
App.vue:
<slot-comp v-slot:"dataFromSlot">
<h2>{{ dataFromSlot.lclData }}</h2>
</slot-comp>
Yuqoridagi misolda, "dataFromSlot" bu shunchaki ism bo‘lib, biz ko‘lamli uyasidan olgan ma’lumotlar obyektini ko‘rsatish uchun o‘zimiz tanlashimiz mumkin. Biz 'lclData' xususiyatidan foydalanib, matn stringini slotdan olamiz va matnni nihoyat <h2> tegida ko‘rsatish uchun interpolyatsiyadan foydalanamiz.
Massivli Skopli Slot
Keng qamrovli slot v-for yordamida massivdan ma’lumotlarni yuborishi mumkin, ammo App.vue-dagi kod asosan bir xil:
Misol
SlotComp.vue:
<template>
<slot
v-for="x in foods"
:key="x"
:foodName="x"
></slot>
</template>
<script>
export default {
data() {
return {
foods: ['Apple','Pizza','Rice','Fish','Cake']
}
}
}
</script>
App.vue:
<slot-comp v-slot="food">
<h2>{{ food.foodName }}</h2>
</slot-comp>
Obyektlar massiviga ega bo‘lgan Slot
Ko‘lamli slot v-for yordamida obyektlar massividan ma’lumotlarni yuborishi mumkin:
Misol
SlotComp.vue:
<template>
<slot
v-for="x in foods"
:key="x.name"
:foodName="x.name"
:foodDesc="x.desc"
:foodUrl="x.url"
></slot>
</template>
<script>
export default {
data() {
return {
foods: [
{ name: 'Apple', desc: 'Apples are a type of fruit that grow on trees.', url: 'img_apple.svg' },
{ name: 'Pizza', desc: 'Pizza has a bread base with tomato sauce, cheese, and toppings on top.', url: 'img_pizza.svg' },
{ name: 'Rice', desc: 'Rice is a type of grain that people like to eat.', url: 'img_rice.svg' },
{ name: 'Fish', desc: 'Fish is an animal that lives in water.', url: 'img_fish.svg' },
{ name: 'Cake', desc: 'Cake is something sweet that tastes good but is not considered healthy.', url: 'img_cake.svg' }
]
}
}
}
</script>
App.vue:
<slot-comp v-slot="food">
<hr>
<h2>{{ food.foodName }}<img :src=food.foodUrl></h2>
<p>{{ food.foodDesc }}</p>
</slot-comp>
Qo‘llangan uyasidan statik ma’lumotlar
Ko‘lamli slot statik ma’lumotlarni, ya’ni Vue misolining ma’lumotlar xususiyatiga tegishli bo‘lmagan ma’lumotlarni ham yuborishi mumkin.
Statik ma’lumotlarni yuborishda biz v-bind dan foydalanmaymiz.
Quyidagi misolda biz farqni ko‘rishimiz uchun bitta statik matnni va dinamik ravishda ma’lumotlar misoliga bog‘langan bitta matnni yuboramiz.
Misol
SlotComp.vue:
<template>
<slot
staticText="This text is static"
:dynamicText="text"
></slot>
</template>
<script>
export default {
data() {
return {
text: 'This text is from the data property'
}
}
}
</script>
App.vue:
<slot-comp v-slot="texts">
<h2>{{ texts.staticText }}</h2>
<p>{{ texts.dynamicText }}</p>
</slot-comp>
Nomlangan Scoped Slots
Ko‘lamli uyalar nomlanishi mumkin.
Nomlangan ko‘lamli slotlardan foydalanish uchun komponent ichidagi slotlarni "name" atributi bilan nomlashimiz kerak.
Nomlangan slotdan ma’lumotlarni olish uchun biz komponentni ishlatadigan ota-onadagi ushbu nomga v-slot direktivasi yoki # stenografiyasi bilan murojaat qilishimiz kerak.
Misol
Ushbu misolda komponent bir marta "leftSlot" uyasiga, bir marta esa "rightSlot" uyasiga qarab yaratilgan.
SlotComp.vue:
<template>
<slot
name="leftSlot"
:text="leftText"
></slot>
<slot
name="rightSlot"
:text="rightText"
></slot>
</template>
<script>
export default {
data() {
return {
leftText: 'This text belongs to the LEFT slot.',
rightText: 'This text belongs to the RIGHT slot.'
}
}
}
</script>
App.vue:
<slot-comp #leftSlot="leftProps">
<div>{{ leftProps.text }}</div>
</slot-comp>
<slot-comp #rightSlot="rightProps">
<div>{{ rightProps.text }}</div>
</slot-comp>
Shu bilan bir qatorda, biz komponentni bir marta ikkita turli "shablon (template)" teglari bilan yaratishimiz mumkin, har bir "shablon (template)" tegi boshqa uyaga ishora qiladi.
Misol
Ushbu misolda komponent faqat bir marta yaratilgan, lekin ikkita "shablon (template)" teglari bilan, har biri boshqa uyaga ishora qiladi.
SlotComp.vue avvalgi misoldagi kabi.
App.vue:
<slot-comp>
<template #leftSlot="leftProps">
<div>{{ leftProps.text }}</div>
</template>
<template #rightSlot="rightProps">
<div>{{ rightProps.text }}</div>
</template>
</slot-comp>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!