اسلات های Scoped (Scoped Slots)
«اسلات Scoped» یعنی اسلاتی که داده محلی می دهد. «داده محلی» یعنی اطلاعات داخل کامپوننت فرزند. با این روش، والد خودش تصمیم می گیرد چطور آن داده را رندر کند؛ مثل معلمی که جواب را می دهد و تو شکل نوشتن را انتخاب می کنی.
ارسال داده محلی با v-bind
برای فرستادن داده محلی از فرزند، روی تگ <slot> از v-bind استفاده می کنیم.
<!-- SlotComp.vue -->
<template>
<slot v-bind:lclData="data"></slot>
</template>
<script>
export default {
data() {
return {
data: 'This is local data'
};
}
};
<\/script>
دریافت داده در والد با v-slot
والد با v-slot داده اسلات Scoped را می گیرد و هرطور خواست نمایش می دهد.
<!-- App.vue -->
<slot-comp v-slot="dataFromSlot">
<h2>{{ dataFromSlot.lclData }}</h2>
</slot-comp>
اسلات Scoped با آرایه
می توانیم با v-for چند بار اسلات را صدا بزنیم و هر بار داده متفاوت بفرستیم.
<!-- 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>
آرایه ای از آبجکت ها
می توانیم چند ویژگی بفرستیم؛ سپس در والد هر کدام را رندر کنیم.
<!-- 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>
ارسال داده استاتیک
می توانیم متن ثابت هم بفرستیم. برای استاتیک، v-bind لازم نیست.
<!-- 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>
اسلات Scoped نام دار
می توانیم اسلات ها را نام دار کنیم و با v-slot یا # دریافت کنیم.
<!-- 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>
الگوی یک بار ساخت با دو template
می توانیم یک بار کامپوننت را بسازیم و دو template برای اسلات ها بدهیم.
<!-- App.vue -->
<slot-comp>
<template #leftSlot="leftProps">
<div>{{ leftProps.text }}</div>
</template>
<template #rightSlot="rightProps">
<div>{{ rightProps.text }}</div>
</template>
</slot-comp>
گام های عملی سریع
- در فرزند، روی <slot> ویژگی های موردنیاز را v-bind کن.
- در والد، با v-slot پراپ ها را بگیر و نام بده.
- نمایش را هرطور دوست داری طراحی کن.
نکته: برای خوانایی، نام پراپ های اسلات Scoped را کوتاه و معنی دار بگذار.
جمع بندی سریع
- اسلات Scoped داده محلی را به والد می دهد.
- ارسال با v-bind روی <slot> انجام می شود.
- دریافت با v-slot یا # در والد است.
- می توان چند پراپ، آرایه و آبجکت فرستاد.
اسلات های Scoped با v-slot ترکیب می شوند و انعطاف زیادی می دهند.