$emit() ($emit())
رویداد سفارشی با $emit() یعنی «فرستادن پیام» از فرزند به والد. «کامپوننت (Component)» یک تکه UI قابل استفاده مجدد است. «رویداد (Event)» همان پیام قابل گوش دادن است. این کار مثل بلندکردن دست در کلاس است.
1) ساخت رویداد سفارشی با $emit()
می خواهیم وضعیت «دلخواه» در والد عوض شود. پس در فرزند با $emit() یک رویداد سفارشی می فرستیم. نام رویداد را کباب کیس می گذاریم.
<script>
export default {
methods: {
toggleFavorite() {
this.$emit('toggle-favorite');
}
}
};
<\/script>
2) دریافت رویداد در والد (emit ویو)
در والد، رویداد را با @ می شنویم. سپس متدی را صدا می زنیم تا رخداد دیده شود.
<template>
<food-item
v-for="x in foods"
:key="x.name"
:food-name="x.name"
:food-desc="x.desc"
:is-favorite="x.favorite"
@toggle-favorite="receiveEmit" />
</template>
<script>
export default {
methods: {
receiveEmit() {
alert('Hello World!');
}
}
};
<\/script>
3) ارسال داده همراه رویداد
باید بدانیم کدام غذا کلیک شده است. پس نام غذا را با رویداد می فرستیم. سپس در والد، مقدار را می گیریم و نمایش می دهیم.
<script>
export default {
methods: {
toggleFavorite() {
this.$emit('toggle-favorite', this.foodName);
}
}
};
<\/script>
<script>
export default {
methods: {
receiveEmit(foodId) {
alert('You clicked: ' + foodId);
}
}
};
<\/script>
حالا وضعیت «دلخواه» را در آرایه والد تغییر می دهیم. این تغییر، واقعی و در جای درست است.
<script>
export default {
methods: {
receiveEmit(foodId) {
const foundFood = this.foods.find((food) => {
return food.name === foodId;
});
foundFood.favorite = !foundFood.favorite;
}
}
};
<\/script>
4) به روزرسانی نمایش با prop والد
چون prop از والد می آید، کافی است در فرزند از همان prop استفاده کنیم. دیگر data اضافی لازم نیست.
<img src="/img_quality.svg" v-show="isFavorite" />
نکته: می توانی کامپوننت های v-for را هم بررسی کنی. ترکیب v-for با emit عالی می شود.
5) گزینه emits برای مستندسازی
مثل props، می توانیم emits را مستند کنیم. این کار فهم استفاده کامپوننت را ساده می کند.
<script>
export default {
props: [
'foodName',
'foodDesc',
'isFavorite'
],
emits: [
'toggle-favorite'
],
methods: {
toggleFavorite() {
this.$emit('toggle-favorite', this.foodName);
}
}
};
<\/script>
جمع بندی سریع
$emit()پیام را از فرزند می فرستد.- در والد با
@گوش بده. - داده لازم را با رویداد بفرست.
- وضعیت را فقط در والد تغییر بده.
emitsرا برای مستندات اضافه کن.
نکته: برای مرور، صفحه پراپس ویو و همین صفحه emit ویو را نشانه گذاری کن.