vuejs.org

ในการเขียน 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 ได้เลยครับ

Reference

ขอบคุณทุกคนที่ติดตาม และอ่านบทความของผมครับ หากใครมีคำถามหรืออยากให้ผมเขียนเกี่ยวกับเรื่องอะไรเพิ่มเติม สามารถแสดงความคิดเห็นไว้ที่ใต้บทความ หรือส่งเรื่องเข้ามาที่ Email ได้เลยครับ หัวข้อไหนน่าสนใจ ผมจะหยิบมาเขียนบทความให้ได้อ่านกันเรื่อยๆครับ

Scroll to Top