Vue 2 เรียก Parent Function ได้ด้วยนะ

สำหรับ vue 2 นั้นหลายๆคนคงได้ลองแล้วก็ ติดใจในความง่ายของมันผมเองก็เช่นกัน เข้าเรื่อง!!

ในการใช้งาน Javascript Framework ที่เป็น Base Component นั้นเราก็จะมีการส่งค่าจาก Parent ไปหา Child ตามรูปนี้

สมมุติเรามี app.vue เป็น Parent แล้ว app.vue จะทำการ fetchAPI จากนั้นเมื่อได้ข้อมูลแล้วจะส่งไปหา child ผ่าน props ถ้าเกิดอยากให้กดปุ่มอะไรก็ตามที่อยู่ใน child แล้วไปเกิด event ที่ตัว parent ก็ใช้ this.$emit(‘eventName’, ‘data’) ส่งค่ากลับไปแจ้งให้ parent ทำงาน

แล้วถ้าเกิดเราไม่อยากส่งอะไรกลับไป หรือใน component นั้นๆมีการ import component อีกหลายตัวกลายเป็นว่าเราจะเรียกฟังชั่นเดียวต้องแก้กันวุ่นวายแน่นอนผมจึงขอเสนอ

vm.$parent

เพื่อให้เราเรียก ไปที่ฟังก์ชั่นของ parent ได้เลยโดยไม่ต้อง emit event อะไรทั้งนั้นมาดู Code กันดีกว่า…

<template>
<router-view></router-view>
</template>
<script>
export default {
  name: 'app',
  methods: {
    handlerParent() {
      alert(`It's Me Parent`)
    }
  }
}
</script>

ในไฟล์นี้เราสร้าง Methods ไว้เพื่อทดสอบ

<template>
  <div class="title" @click="handler">
    Hello Home
  </div>
</template>
<script>
export default {
  methods: {
    handler() {
      this.$parent.handlerParent()
    }
  }
}
</script>
<style scoped>
.title {
  margin-top: 10%;
  font-size: 34px;
  text-align: center;
}
.title:hover {
  cursor: pointer;
  color: rebeccapurple;
}
</style>

ในไฟล์นี้เราจะทดลองเรียกฟังก์ชั่นของ Parent โดยผ่าน this.$parent.handlerParent()

ทีนี้ลองรันกันดูครับกดที่ Hello Home ก็จะเจอ alert กันแล้ว

****แต่ในกรณีที่มีการส่ง Data กลับควรใช้ Emit Events แทนนะครับเพราะอาจจะเกิดปัญหาได้เนื่องจากตัว Vuejs ไม่ได้ออกแบบมาให้ส่งค่าผ่านทางอื่น และ ใน Doc ก็เตือนว่า Read Only ผมเข้าใจว่าให้เรียกเท่านั้นห้ามส่งอะไรไป

สำหรับ $parent นั้นสามารถตรวจสอบได้โดยการ console.log(this.$parent) ออกมาดูได้เลยครับว่ามีฟังก์ชั่นอะไรที่เราเรียกได้บ้างแบบนี้

สำหรับ component ไหนที่มีฟังก์ชั่น หรือ component ซ้อนกันเยอะๆอาจจะต้องเรียกลงไปลึกกว่านี้เช่น this.$parent.$options.[…..] ต้องลองค้นหาดูครับว่าชื่อฟังก์ชั่นที่เราต้องการอยู่ตรงไหน..