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

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

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

Vue.js 2

สมมุติเรามี 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.[…..] ต้องลองค้นหาดูครับว่าชื่อฟังก์ชั่นที่เราต้องการอยู่ตรงไหน..

ลิงค์ Github

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

Itthipat Thitsarak

สวัสดีครับผม อิทธิพัทธ์ (เป้) เป็น Freelance Web developer ชอบหาเทคนิคต่างๆที่ทำให้ชีวิต Programmer ง่ายขึ้นโดย Blog นี้จะ สอน Laravel, Vuejs, CSS, HTML 5 และอื่นๆ ที่เกี่ยวกับการทำเว็บไซต์

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

Scroll to Top