$emit() ($emit())
متد $emit() یعنی «رویداد سفارشی (Custom Event)» را از فرزند به والد بفرست. مثل وقتی زنگ می زنی و به مامان خبر می دهی. سپس والد می تواند گوش دهد و واکنش نشان دهد.
تعریف و کاربرد $emit()
$emit() یک رویداد سفارشی را در فرزند فعال می کند. بنابراین والد با v-on یا @ آن رویداد را می شنود. همچنین می توان همراه رویداد «بار (Payload)» هم فرستاد، مثل پیام یا عدد.
نکته: برای مسیر برگشتیِ داده از والد به فرزند، از $props استفاده کن. برای چینش محتوا در فرزند، صفحه $slots را ببین.
مثال ساده: فقط اعلام رویداد
با کلیک، فرزند رویداد سفارشی را به والد می فرستد. والد می تواند آن را شنود کند.
<template>
<div>
<h3>ChildComp.vue</h3>
<p>Click the button to trigger a custom event.</p>
<button v-on:click="onClick">Trigger</button>
</div>
</template>
<script>
export default {
methods: {
onClick() {
this.$emit('custom-event');
}
}
};
<\/script>
مثال 1: ارسال پیام به والد
اینجا یک متن می گیریم و همان را همراه رویداد می فرستیم. والد پیام را دریافت می کند.
<template>
<div>
<h3>ChildComp.vue</h3>
<p>Write and send the message to parent using $emit().</p>
<input type="text" v-model="message" placeholder="write something..">
<button v-on:click="send">Send</button>
</div>
</template>
<script>
export default {
data() {
return {
message: null;
};
},
methods: {
send() {
this.$emit('message-sent', this.message);
}
}
};
<\/script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
max-width: 350px;
margin-top: 20px;
}
input {
display: block;
margin-bottom: 15px;
}
<\/style>
مثال 2: ارسال چند مقدار و کار با $refs
نام محصول و امتیاز را می فرستیم. سپس ورودی نام دوباره فوکوس می گیرد.
<template>
<div>
<h3>ChildComp.vue</h3>
<p>Rate a product and send name and rating.</p>
<input type="text" v-model="productName" placeholder="Product name.." ref="inpName">
<input type="number" v-model="productRating" placeholder="Rating 1 to 10..">
<button v-on:click="send">Register</button>
</div>
</template>
<script>
export default {
data() {
return {
productName: null;
productRating: null;
};
},
methods: {
send() {
this.$emit('message-sent', this.productName, this.productRating);
this.productName = null;
this.productRating = null;
this.$refs.inpName.focus();
}
},
mounted() {
this.$refs.inpName.focus();
}
};
<\/script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
max-width: 350px;
margin-top: 20px;
}
input {
display: block;
margin-bottom: 15px;
}
<\/style>
مثال 3: مستندسازی رویدادها با emits
گزینه emits فقط رویدادهای مجاز این کامپوننت را اعلام می کند. این کار خوانایی را بهتر می کند.
<template>
<div>
<h3>ChildComp.vue</h3>
<p>Click to trigger a documented custom event.</p>
<button v-on:click="trigger">Trigger</button>
</div>
</template>
<script>
export default {
emits: ['custom-event'],
methods: {
trigger() {
this.$emit('custom-event');
}
}
};
<\/script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
max-width: 350px;
margin-top: 20px;
}
<\/style>
گام های سریع برای استفاده
- رویداد را در فرزند با
$emit(name)فعال کن. - اگر لازم بود، بار رویداد را اضافه کن.
- در والد، رویداد را با
v-on:nameگوش کن.
هشدار: رویداد را کوتاه و معنی دار نام گذاری کن. سپس از نوشتن منطق سنگین در فرزند خودداری کن.
جمع بندی سریع
- $emit برای ارتباط فرزند به والد است.
- می توان بار رویداد ارسال کرد.
emitsمستندسازی رویدادها را آسان می کند.- برای دریافت، از رویداد سفارشی Vue در والد استفاده کن.