Vue.js เริ่มต้น ตอน5 (ทําความรู้จักกับ Props)

หลังจากที่เราเรียนรู้ Component กันไปแล้ว ถ้ายังจํากันได้ภายใน Component มี Option ตัวนึงชื่อว่า Props ซึ่งมีหน้าที่ รับข้อมูลจากภายนอก Component เข้ามาใช้งานภายใน Component โดยจะรับข้อมูลผ่านทาง Attribute การใช้งาน Props สามารถใช้งานได้หลายรูปแบบ เราจะมาเรียนรู้ไปทีละแบบนะครับ

Basic use

MyComponent.vue

เรียกใช้งาน Component

Prop Casing (camelCase vs kebab-case)

โดยปกติ HTML Attribute name เป็นแบบ case-insensitive หมายความว่า ไม่ว่าจะเป็นตัวพิมพ์เล็กหรือ ตัวพิมพ์ใหญ่จะมองว่าเป็นตัวเดียวกัน เพื่อให้เห็นภาพ ดูตัวอย่างนี้ครับ

MyComponent.vue

เราสามารถเรียกใช้งาน Component ได้แบบนี้

จะเห็นว่าตอนที่เราประกาศ Props เราประกาศเป็นแบบ camelCase แต่ตอนเราเรียกใช้ Component เราสามารถส่งข้อมูลผ่าน Props โดยระบุ Attribute เป็นแบบ kebab-case ได้

Static and Dynamic Props

การส่งข้อมูลผ่าน Props แบบ Static

การส่งข้อมูลผ่าน Props แบบ Dynamic ซึ่งข้อมูลสามารถเปลี่ยนแปลงไปตามการทํางานของโปรแกรม เราจะใช้ v-bind: เพิ่มเข้าไปหน้าของชื่อ Props ประมาณนี้

การส่งข้อมูลชนิดต่างๆ

Passing a Number

ใช้ v-bind เพื่อบอกว่า เป็น expression ไม่ใช้ String

Passing a Boolean

ใช้ v-bind เพื่อบอกว่า เป็น expression ไม่ใช้ String

Passing an Array

ใช้ v-bind เพื่อบอกว่า เป็น expression ไม่ใช้ String

Passing an Object

ใช้ v-bind เพื่อบอกว่า เป็น expression ไม่ใช้ String

Passing the Properties of an Object

เราสามารถสร้างเป็น Object ของ Props ที่เราต้องการส่งข้อมูล แล้วส่งไปที่เดียวได้เลย กรณีที่มี Props จํานวนมากๆ จะได้ไม่ต้องเขียนยาวๆ ตัวอย่างประมาณนี้

จากตัวอย่างด้านบนจะมีความหมายเดียวกันกับ Code ด้านล่าง

One-Way Data Flow

โดยปกติการส่งข้อมูลผ่าน Props ไปให้ Child component แล้วเมื่อ Child component เปลี่ยนแปลงข้อมูลดังกล่าว จะส่งผลไปยัง Parent component ด้วย หรือในทางกลับกันเมื่อข้อมูลใน Parent conponent เปลี่ยนแปลง ก็จะส่งผลมายัง Child ด้วยเช่นกัน

ดังนั้น ถ้าต้องการเปลี่ยนแปลงข้อมูลที่รับมาจาก Parent component โดยที่ไม่ต้องการให้กระทบกัน Parent component สามารถทําได้ดังนี้

สามารถทําได้สองแบบดังนี้

แบบที่ 1

แบบที่ 2

กรณีที่ ส่งข้อมูลที่เป็น Object จะส่งเป็นแบบ By Reference หมายความว่า เมื่อ Component แม่ เปลี่ยนแปลงข้อมูล จะส่งผลมายัง Component ลูกด้วย

Prop Validation

Props สามารถกําหนดประเภทของข้อมูลที่รับเข้ามาได้ เช่น ต้องการเป็น ตัวเลข, ตัวอักษร ฯลฯ รวมถึงกําหนดค่า default ด้วย

สามารถระบุได้ตามตัวอย่างนี้ครับ

Type Checks

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array
  • Symbol

นอกจากนี้เราสามารถสร้าง type ขึ้นมาเองได้ตามตัวอย่างนี้

ตัวอย่างการใช้งาน

มาถึงตอนนี้เราได้เรียนรู้เรื่องการใช้งาน Props ในแบบต่างๆ รวมไปถึงการ Validation Props กันไปแล้วนะครับ ผมก็ขอจบไว้เพียงเท่านี้ครับ แล้วเจอกันบทความหน้า ขอบคุณครับ

Comments