ในการเขียน Vuejs ที่เป็น base on component นั้นหลายท่านคงประสบปัญหาที่ว่าหลังจากแยก component แล้วเราจะส่งค่าหรือคุยกับ parent component ได้ยังไงเรามาดูวิธีการกันดีกว่าครับ
ใน emit event จะประกอบด้วย 2 argument หลักๆคือ eventName และ value จะเขียนได้แบบนี้ครับ
$emit('eventFoo', 'foo')ถ้าเราต้องการ emit ใน template tag เราสามารถสั่งแบบนี้ที่ component ปุ่มได้เลยเช่น
//ButtonItem.vue
<button @click="$emit('eventFoo', 'Foo')"></button>หลังจากเราทำการส่ง event กลับไปที่ parent แล้วเราสามารถรับ Event นี้ได้ด้วยการใช้ v-on หรือ @ ได้เลยครับ และ vue จะส่งค่าของ value จาก emit ไปให้เป็น argument แรกของ function ที่เราเรียกครับดูตรง doFuncFoo(value)
import ButtonItem from './ButtonItem'
//Dashboard.vue
<template>
<div>
<button-item @eventFoo="doFuncFoo"></button-item>
</div>
</template>
<script>
export default {
methods: {
doFuncFoo(value) {
console.log(value)
}
}
}
</script>เพียงเท่านี้เราก็จะได้ค่า foo ออกมาแล้วหรือถ้าเราอยากจะส่ง object เราก็สามารถส่งผ่าน Emit ได้เหมือนกัน
$emit('eventName', {
name: 'StpDevelo',
nickName: 'Pae'
})หรือ ถ้าใครคิดว่างานหรือ task ที่ต้องทำไม่อยากไปสร้างฟังก์ชั่นเราสามารถรับค่าแบบนี้ได้เลยเขียน func ลงไปใน html เลย !!แต่อย่าลืม Vue Guide Line เค้าไม่แนะนำนะครับ ^^
<button-item @eventFoo="value => myFormData = value"></button-item>สุดท้ายถ้าเราต้องการเขียน $emit ใน tag script เราแค่ใช้ this.$emit(‘eventName’) และ ถ้าเราไม่ต้องการส่งค่าอะไรกลับไปเราสามารถส่งแค่ชื่อ event ได้เลยครับ
