วิธี Emit event on Vuejs 2

การส่ง props และ emit ของ vuejs
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

เกี่ยวกับผู้เขียน

ITTHIPAT

สวัสดีครับผม อิทธิพัทธ์ (เป้) ชอบหาเทคนิคต่างๆที่ทำให้ชีวิต Programmer ง่ายขึ้น ทั้ง Automate, Library ชอบทำ Blog และ Video ถ้ามีเวลานะ!

ขอบคุณทุกคนที่ติดตาม และอ่านบทความของผมครับ ผมหวังว่าความรู้ที่เขียนขึ้นในเว็บไซต์นี้จะช่วยทุกท่านได้ไม่มากก็น้อย 

Scroll to Top