[VUE.JS 2] event handle communicate between component

แวะมาทักทายกันได้

ไม่ได้เป็นเรื่องใหม่อะไร VUE.JS ไปถึงเวอร์ชัน 4 แล้ว ในบทความนี้อยากจะบันทึกวิธีการทำเอาไว้หลังจากที่ได้ทดลองและทำความเข้าใจเกี่ยวกับการทำ Event Handle การสื่อสารระหว่าง Component child ไปยัง Component Parent หรือ Component Parent ไปยัง Component child

เนื้อหานี้อาจจะไม่เหมาะกับผู้ที่ยังไม่เคยสัมผัสกับ Vue.js นะครับ

VUE.JS Framework เป็นเฟรมเวิร์คที่ base component สามารถที่จะสร้างเว็บไซต์โดยแยกออกเป็น Module หรือ component ให้สามารถเรียกใช้งานซ้ำได้ในหลายๆตำแหน่งในเว็บไซต์ ดังนั้น ไม่แปลกที่จะต้องมีการส่งข้อมูลระหว่างกัน

ฝากกดโฆษณา Google Ads สัก click เพื่อเป็นกำลังใจแก่ผู้เขียนด้วยนะครับ

วิธีการส่งข้อมูลจาก Component Parent ไปยัง Component child

จาก code ด้านล่างนั้น ใน attribute ที่ชื่อ props โดยที่จะกำหนดการรับค่าและกำหนด type ของตัวแปรเอาไว้ด้วยโดยสามารถประกาศ type ได้ตามนี้

props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }

ref: https://vuejs.org/v2/guide/components-props.html

ชื่อที่ได้ใส่เอาไว้ แล้วนำไปใส่ไว้ใน DOM พร้อมกับเครื่องหมาย {{ props parameter }} ตามตัวอย่างด้านล่าง

จากตัวอย่างด้านล่างนี้ได้ประกาศเอาไว้ว่า

 props: {

 name: String,

 code: String,

 cost: String,

},

โดยประกาศ type เป็น String ทั้งหมด

แล้วนำมาใส่ไว้ที่ tag

<tbody>

 <tr>

 <td>{{ name }}</td>

 <td>{{ code }}</td>

 <td>{{ cost }}</td>

 </tr>

</tbody>

มาที่ฝั่ง Parent กันบ้าง ให้สั่งเกตที่ tag component ของ coupon-display ที่ชื่อเป็น camel case จะประกาศเป็นชื่อเดียวกันกับที่ใส่เอาไว้ของ child component

couponBuild เป็น Object ที่รับค่ามาจาก data function โดยรับค่ามาจาก state VUEX

<coupon-display

 :name="couponBuild.couponname"

 :code="couponBuild.couponcode"

 :cost="couponBuild.couponcost"

 @update:list="forceRerender"

></coupon-display>

จาก state VUEX ที่กล่าวไว้มีส่วนเกี่ยวข้องอยู่นิดหน่อยสำหรับบทความนี้ ซึ่งในการจะได้ค่าจาก state ได้นั้น หากอยู่ component เดียวกันก็สามารถที่จะดึง data จาก state มาใช้งานได้เลย แต่ว่าถ้าเป็นคนละ component จะไม่สามารถเรียกได้จึงจำเป็นต้องใช้ MapState function ในการเชื่อมข้อมูลกัน โดยใช้ attribute computed

computed: mapState({
 couponBuild: "createCoupon",
 }),

createCoupon มาจากไหน ก็มาจาก data function เช่นเดียวกันโดย map จาก state this.$store.state.createCoupon,

data() {
 return {
 createCoupon: this.$store.state.createCoupon,
 };
 },

วิธีการส่งข้อมูลจาก Component child ไปยัง Component Parent

ในฝั่งของ Child จะต้องทำอะไรบ้าง

เช่นเดียวกันกับ การส่งจาก parent ไปยัง child แต่ว่า จะใช้ Event ในการจัดการ โดยใช้คำสั่ง

this.$emit("update:list", true);

ใน method ที่สามารถเรียกคำสั่งนี้ได้

uppdate:list เป็นชื่อ event ส่วน true เป็น object หรือ param ก็ได้

มาทางด้านของ Parent ที่จะรับค่าจาก emit event นี้กันบ้าง

@update:list="forceRerender"

ใช้ @ ตามด้วยชื่อ event ที่ได้สร้างไว้ที่ child component ส่วนของ forceRender เป็นชื่อ method ที่อยู่ในฝั่งของ parent จะทำอะไรต่อก็ do something ที่ได้เลย

// child component ชื่อ couponDisplay.vue

<template>
 <div>
 <div class="container">

 <div class="table-responsive">
 <table class="table table-striped">
 <tbody>
 <tr>
 <td>{{ name }}</td>
 <td>{{ code }}</td>
 <td>{{ cost }}</td>
 </tr>
 </tbody>
 </table>
 </div>

 <div class="row">
 <div class="col-md-12 form-group">
 <button
 type="submit"
 class="btn btn-lg btn-success btn-block"
 @click="couponadd"
 >
 Confirm
 </button>
 </div>
 </div>
 </div>
 </div>
</template>

<script>
export default {
 props: {
 name: String,
 code: String,
 cost: String,
 },
 methods: {
 async couponadd() {
 this.$emit("update:list", true);
 },
 },
};
</script>

// parent component ชื่อ coupon.vue

<template>
 <div class="container">
 <div class="row">
 <div class="col-md-4">
 <coupon-display
 :name="couponBuild.couponname"
 :code="couponBuild.couponcode"
 :cost="couponBuild.couponcost"
 @update:list="forceRerender"
 ></coupon-display>
 </div>
 </div>
 </div>
</template>

<script>
import CouponDisplay from "./couponDisplay.vue";
import { mapState } from "vuex";

export default {
 components: {
 CouponDisplay,
 },
 data() {
 return {
 createCoupon: this.$store.state.createCoupon,
 };
 },
 computed: mapState({
 couponBuild: "createCoupon",
 }),
};
</script>

แวะมาทักทายกันได้

[VUE.JS 2] event handle communicate between component

Categories

Tags

[VUE.JS 2] event handle communicate between component

Categories

Tags

ติดต่อเรา