hand tlhand crfog b
10Mar, 2020
Language blog :
Thai
Share blog : 
10 March, 2020
Thai

ส่งข้อมูลระหว่างคอมโพเนนต์แบบง่ายไม่ต้อง chain ด้วย Provide/Inject บน Vue.js

By

4 mins read
ส่งข้อมูลระหว่างคอมโพเนนต์แบบง่ายไม่ต้อง chain ด้วย Provide/Inject บน Vue.js

สวัสดีครับ เพื่อน ๆ ชาว Developer ทุกคน วันนี้เอาใจสาย Front-end กันหน่อย Framework ที่เราจะมาพูดถึงกันในวันนี้ คือ VueJs เฟรมเวิร์กฟรอนต์เอนต์ (Front-end) ที่มาแรงในขณะนี้

สำหรับวันนี้นั้นผมมีวิธีดี ๆง่าย ๆ สำหรับการจัดการ การส่งข้อมูล ระหว่างคอมโพเนนต์แม่ไปหาลูก แต่แน่นอน สำหรับใครหลายคนก็คงจะบอกว่าไม่น่ามีอะไรยากใช่ไหมหละ? แต่ปัญหามักจะมาตอนเมื่อเราต้องการส่งข้อมูลจากแม่ไปหาลูก หลาน เหลน โหลน.. พอจะนึกภาพออกแล้วใช่ไหมหละ มันคงน่ากลัวน่าดูหากเราจะต้องไล่ Chain ส่งข้อมูลไปในแต่ละลำดับอย่างไร ทาง Vue ก็ไม่รอช้ามีเครื่องมือมาให้ใช้กันอย่างสะดวกสบาย พระเอกของเรานั่นก็คือ Provide / Inject นั่นเอง

Provide / Inject สามารถช่วยให้เราส่งข้อมูลไปหา ลูก หลาน เหลน โหลน ได้อย่างง่ายดายเพียง สองบรรทัดเท่านั้น!! ไม่ว่าจะส่งไปลึกแค่นั้นมีลูกกี่ชั้นก็ใส่เพียง “สองบรรทัด” เราลองไปดูหน้าตาของ Code กันเลยดีกว่า

ในส่วนของคอมโพเนนต์แม่ จะมีหน้าตาเป็นตัวอย่างนี้ครับ  

sennalabs-Frontend-Component 

ในส่วนของคอมโพเนนต์ลูก จะมีหน้าตาเป็นตัวอย่างนี้ครับ 

sennalabs-Frontend-Component1

เพียงเท่านี้เราก็สามารถเรียกใช้งานข้อมูลของคอมโพเนนต์แม่ได้อย่างง่ายดาย โดยการใช้งานนั้นเราสามารถนำ inject ไปใช้ได้ทุกที่ที่เป็นคอมโพเนนต์ลูก ลักษณะการทำงานนี้จะคล้ายๆกับ Context ของ React ถ้าใครเคยเขียน React มาก่อน คงจะคุ้นกันดีเลยใช่ไหมครับ ถ้าคอมโพเนนต์ไหนๆ อยู่ใน Scope ของคอมโพเนนต์แม่ ก็สามารถเรียกใช้งานได้หมด 

แต่ทุกอย่างจะดูง่ายดายเกินไป ไร้ปัญหาก็คงเป็นไปได้ยาก ฟีเจอร์นี้ก็ยังมีข้อจำกัดในเรื่องของ reactive นั่นคือ ถ้าคอมโพเนนต์แม่เปลี่ยนค่า หรือ อัปเดตค่า คอมโพเนนต์ลูกจะไม่สามารถอัปเดตตามได้หรือไม่? reactive นั่นเอง คงจะน่าเสียดายแย่ ถ้าฟีเจอร์นี้ไม่สามารถ reactive หรืออัปเดตค่าให้กับคอมโพเนนต์ลูกได้

วันนี้เลยมีวิธีเจ๋ง ๆ ดี ๆ มาแนะนำในการแก้ไขปัญหานี้โดยการใช้ Getter มาช่วยในการทำให้ Provide / Inject เป็นแบบ Reactive 

สำหรับ Getter / Setter ถือเป็น Mechanism ที่เป็นพื้นฐาน เราเลยจะขอข้ามไปในบทความนี้ก่อนนะครับ เราจะนำมา Implement รวมกับ Provide / Inject เพื่อสร้าง reactive context กัน

ขั้นตอนแรกเราต้องสร้าง Method ที่คอมโพเนนต์แม่เพื่อให้คอมโพเนนต์ลูกสามารถเรียกใช้ Getter ได้ โดยหน้าตาจะเป็นรูปแบบนี้ดังนี้ 

sennalabs-Frontend-Component3

ทำการเปลี่ยนจาก Assign ที่เป็น Compute ธรรมดา ๆ ให้กลายเป็น method ที่ทำการรีเทิร์น Compute ออกไป เพียงเท่านี้เราก็สามารถเรียกใช้ Getter ในคอมโพเนนต์ลูกได้แล้วโดยหน้าตาจะเป็นแบบนี้ครับ  

sennalabs-Frontend-Component

โดยการทำงานของ getter และ compute รวมกันเราจะได้ฟีเจอร์ที่ reactive ขึ้นมา นั่นคือ compute จะทำการรีอัปเดตทุกครั้ง เมื่อค่าข้างในของ compute ถูกการเปลี่ยนแปลงหรืออัปเดตเกิดขึ้น และการทำงานของ getter จะทำให้เราสามารถได้รับค่าที่อัปเดตจากคอมโพเนนต์แม่อยู่เสมอ

เพียงเท่านี้เราก็จะได้ Provide / Inject ที่เป็น reactive สามารถนำใช้ประโยชน์รีแฟกเตอร์การ chain ข้อมูลคอมโพเนนต์ให้สั้นลงและไม่สับสน จริง ๆ แล้วยังมีวิธีอื่นอีกที่สามารถทำให้ Provide / Inject ทำงานเป็น reactive เช่น การใช้ plugin/mixin หรือจะเป็นการใช้ vue.observable มาช่วย เป็นต้น  แต่วิธีที่กล่าวมานั้นจะเป็นการดึง plugin อื่นมาช่วยเสริม แต่จริง ๆ แล้วเราสามารถใช้ทริกง่าย ๆ ที่กล่าวไว้ในบทความนี้ทำงานได้ดี และสั้นกว่าตัวอื่น ๆ คราวหน้าเราจะไปลุยทริกไหนของ front-end ติดตามที่ https://sennalabs.com/en/blogs ได้เลยครับ

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

15
October, 2024
JS class syntax
15 October, 2024
JS class syntax
เชื่อว่าหลายๆคนที่เขียน javascript กันมา คงต้องเคยสงสัยกันบ้าง ว่า class ที่อยู่ใน js เนี่ย มันคืออะไร แล้วมันมีหน้าที่ต่างกับการประกาศ function อย่างไร? เรามารู้จักกับ class ให้มากขึ้นกันดีกว่า class เปรียบเสมือนกับ blueprint หรือแบบพิมพ์เขียว ที่สามารถนำไปสร้างเป็นสิ่งของ( object ) ตาม blueprint หรือแบบพิมพ์เขียว( class ) นั้นๆได้ โดยภายใน class

By

4 mins read
Thai
15
October, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
15 October, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
ผู้ให้บริการเครือข่ายในสหรัฐฯ ได้เปิดตัว 5G ในหลายรูปแบบ และเช่นเดียวกับผู้ให้บริการเครือข่ายในยุโรปหลายราย แต่… 5G มันคืออะไร และทำไมเราต้องให้ความสนใจ บทความนี้ได้รวบรวม 15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G เพราะเราปฏิเสธไม่ได้เลยว่ามันกำลังจะถูกใช้งานอย่างกว้างขวางขึ้น 1. 5G หรือ Fifth-Generation คือยุคใหม่ของเทคโนโลยีเครือข่ายไร้สายที่จะมาแทนที่ระบบ 4G ที่เราใช้อยู่ในปัจจุบัน ซึ่งมันไม่ได้ถูกจำกัดแค่มือถือเท่านั้น แต่รวมถึงอุปกรณ์ทุกชนิดที่เชื่อมต่ออินเตอร์เน็ตได้ 2. 5G คือการพัฒนา 3 ส่วนที่สำคัญที่จะนำมาสู่การเชื่อมต่ออุปกรณ์ไร้สายต่างๆ ขยายช่องสัญญาณขนาดใหญ่ขึ้นเพื่อเพิ่มความเร็วในการเชื่อมต่อ การตอบสนองที่รวดเร็วขึ้นในระยะเวลาที่น้อยลง ความสามารถในการเชื่อมต่ออุปกรณ์มากกว่า 1 ในเวลาเดียวกัน 3. สัญญาณ 5G นั้นแตกต่างจากระบบ

By

4 mins read
Thai
15
October, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
15 October, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
ในปัจจุบันนี้ ปฏิเสธไม่ได้เลยว่าภาษาที่ถูกใช้ในการเขียนเว็บต่าง ๆ นั้น คงหนีไม่พ้นภาษา Javascript ซึ่งเป็นภาษาที่ถูกนำไปพัฒนาเป็น framework หรือ library ต่าง ๆ มากมาย ผู้พัฒนาหลายคนก็มีรูปแบบการเขียนภาษา Javascript ที่แตกต่างกัน เราเลยมีแนวทางการเขียนที่หลากหลาย มาแบ่งปันเพื่อน ๆ เกี่ยวกับการจัดการ Array ด้วยภาษา Javascript กัน เรามาดูตัวอย่างกันเลยดีกว่า โดยปกติแล้วการ copy ค่าจาก value type ธรรมดา สามารถเขียนได้ดังนี้

By

4 mins read
Thai

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.