Vue slotlar
Slotlar Vue-da yanada moslashuvchan va qayta foydalanish mumkin bo‘lgan qismlarga imkon beruvchi kuchli xususiyatdir.
Biz ota-onadan kontentni bola komponentining <template>-ga yuborish uchun Vue-da slotlardan foydalanamiz.
uyalar
Hozirgacha biz <template> ichidagi komponentlardan o‘z-o‘zidan yopiladigan teglar sifatida foydalandik:
App.vue:
<template>
<slot-comp />
</template>Buning o‘rniga biz ochish va yopish teglaridan foydalanishimiz va ichiga ba’zi tarkibni qo‘yishimiz mumkin, masalan, matn:
App.vue:
<template>
<slot-comp>Hello World!</slot-comp>
</template>
Lekin "Salom dunyo!" komponent ichida va uni bizning sahifamizda ko‘rsatish uchun biz komponent ichidagi <slot> tegidan foydalanishimiz kerak. <slot> yorlig‘i kontent uchun to‘ldiruvchi vazifasini bajaradi, shuning uchun ilova yaratilgandan so‘ng <slot> unga yuborilgan kontent bilan almashtiriladi.
Misol
SlotComp.vue:
<template>
<div>
<p>SlotComp.vue</p>
<slot></slot>
</div>
</template>
Kartalar kabi uyalar
Slotlar, shuningdek, kartaga o‘xshash ko‘rinishga ega bo‘lish uchun dinamik HTML tarkibining katta qismlarini o‘rash uchun ham ishlatilishi mumkin.
Ilgari biz ma’lumotlarni komponentlar ichida tarkib yaratish uchun prop sifatida yuborgan edik, endi biz HTML tarkibini to‘g‘ridan-to‘g‘ri <slot> tegi ichiga yuborishimiz mumkin.
Misol
App.vue:
<template>
<h3>Slots in Vue</h3>
<p>We create card-like div boxes from the foods array.</p>
<div id="wrapper">
<slot-comp v-for="x in foods">
<img v-bind:src="x.url">
<h4>{{x.name}}</h4>
<p>{{x.desc}}</p>
</slot-comp>
</div>
</template>
Kontent <slot> joylashgan komponentga kirar ekan, biz <slot> atrofida div ishlatamiz va <div>’ni lokal uslublaymiz — shu tariqa ilovamizdagi boshqa div’larga ta’sir qilmasdan kontent atrofida kartaga o‘xshash ko‘rinish hosil qilamiz.
SlotComp.vue:
<template>
<div> <!-- This div makes the card-like appearance -->
<slot></slot>
</div>
</template>
<script></script>
<style scoped>
div {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
border-radius: 10px;
margin: 10px;
}
</style>
Kontent atrofida kartaga o‘xshash framework hosil qiluvchi komponentlar turli elementlarni yaratish uchun qayta ishlatilishi mumkin, lekin atrofida bir xil kartaga o‘xshash framework bilan.
Ushbu misolda biz altbilgi yaratish uchun oziq-ovqat mahsulotlari bilan bir xil komponentdan foydalanamiz.
Misol
App.vue:
<template>
<h3>Reusable Slot Cards</h3>
<p>We create card-like div boxes from the foods array.</p>
<p>We also create a card-like footer by reusing the same component.</p>
<div id="wrapper">
<slot-comp v-for="x in foods">
<img v-bind:src="x.url">
<h4>{{x.name}}</h4>
</slot-comp>
</div>
<footer>
<slot-comp>
<h4>Footer</h4>
</slot-comp>
</footer>
</template>
Qayta tarkib
Agar komponent kontentsiz yaratilgan bo‘lsa, biz <slot> da zaxira tarkibga ega bo‘lishimiz mumkin.
Misol
Ushbu ilovaning birinchi komponentida hech qanday tarkib mavjud emas, shuning uchun zaxira kontent taqdim etiladi.
App.vue:
<template>
<h3>Slots Fallback Content</h3>
<p>A component without content provided can have fallback content in the slot tag.</p>
<slot-comp>
<!-- Empty -->
</slot-comp>
<slot-comp>
<h4>This content is provided from App.vue</h4>
</slot-comp>
</template>
SlotComp.vue:
<template>
<div>
<slot>
<h4>This is fallback content</h4>
</slot>
</div>
</template>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!