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

7 Jun 2018

Share to:

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

Basic use

MyComponent.vue

<template>
  <div>
      {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: [
    'msg'
  ]
}
</script>

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

<MyComponent msg="This is a message."/>

Prop Casing (camelCase vs kebab-case)

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

<template>
  <div>
      {{ MyMessage }}
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: [
    'MyMessage'
  ]
}
</script>

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

<MyComponent my-message="This is a message."/>

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

Static and Dynamic Props

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

<blog-post title="My journey with Vue"></blog-post>

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

<blog-post v-bind:title="post.title"></blog-post>

การส่งข้อมูลชนิดต่างๆ Passing a Number ใช้ v-bind เพื่อบอกว่า เป็น expression ไม่ใช้ String

<blog-post v-bind:likes="42"></blog-post>

<!-- Dynamically -->
<blog-post v-bind:likes="post.likes"></blog-post>

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

<!-- ถ้าเรียกแบบนี้หมายความว่า favorited เป็น true -->
<blog-post favorited></blog-post>

<!-- Even though `false` is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.          -->
<base-input v-bind:favorited="false">

<!-- Dynamically assign to the value of a variable. -->
<base-input v-bind:favorited="post.currentUserFavorited">

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

<!-- Even though the array is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.            -->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<!-- Dynamically assign to the value of a variable. -->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

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

<!-- Even though the object is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.             -->
<blog-post v-bind:comments="{ id: 1, title: 'My Journey with Vue' }"></blog-post>

<!-- Dynamically assign to the value of a variable. -->
<blog-post v-bind:post="post"></blog-post>

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

//javascript
post: {
  id: 1,
  title: 'My Journey with Vue'
}
<blog-post v-bind="post"></blog-post>

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

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

One-Way Data Flow

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

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

แบบที่ 2

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

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

Prop Validation

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

props: {
    // Basic type check (`null` matches any type)
    propA: Number,
    // Multiple possible types
    propB: [String, Number],
    // Required string
    propC: {
      type: String,
      required: true
    },
    // Number with a default value
    propD: {
      type: Number,
      default: 100
    },
    // Object with a default value
    propE: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function
      default: function () {
        return { message: 'hello' }
      }
    },
    // Custom validator function
    propF: {
      validator: function (value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

Type Checks

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

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

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

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

props: {
    author: Person
}

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

Suggestion blogs

เหรียญ 1 บาท พระราชพิธีสถาปนาสมเด็จพระเจ้าลูกยาเธอเจ้าฟ้าวชิราลงกรณ ขึ้นทรงดำรงตำแหน่งสมเด็จพระบรมโอรสาธิราชเจ้าฟ้ามหาวชิราลงกรณ สยามมกุฎราชกุมาร

พระราชพิธีสถาปนาสมเด็จพระเจ้าลูกยาเธอเจ้าฟ้าวชิราลงกรณ ขึ้นทรงดำรงตำแหน่งสมเด็จพระบรมโอรสาธิราชเจ้าฟ้ามหาวชิราลงกรณ สยามมกุฎราชกุมาร พ.ศ.2515ข้อมูลผลิตเป็นที่ระลึกเนื่องในพระราชพิธีสถาปนาสมเด็จพระเจ้าลูกยาเธอเจ้าฟ้าวชิราลงกรณ ขึ้นทรงดำรงตำแหน่งสมเด็จพระบรมโอรสาธิราชเจ้าฟ้ามหาวชิราลงกรณ สยามมกุฎราชกุมาร เมื่อวันที่ 28 ธันวาคม พ.ศ. 2515

Goodbye wordpress, Hello Hugo

สวัสดีครับ กลับมาอีกครั้งหลังจากหายไปไม่ได้เขียน Blog นานมากๆ กลับมาครั้งนี้มีการเปลี่ยนแปลงหลายอย่างครับชื่อเว็บเปลี่ยนจากเดิม www.thitiblog.com เป็น thiti.dev แล้วในตอนนี้ และเปลี่ยนจากเดิมที่ใช้ Wordpress มาเป็น Hugo ก็จะมาเล่าให้ฟังว่า Hugo มันคืออะไร ดีอย่างไง ทําไมถึงหันมาใช้ Hugo

วิธีลบ Directory ที่ภายในมีข้อมูลอยู่ Ubuntu

ปกติเมื่อเราต้องการลบ Directory ใน Ubuntu เราสามารถใช้คําสั่ง rmdir แต่ถ้าใน Directory ที่เราต้องการลบนั้นมีข้อมูล(File หรือ Directory) อยู่ภายในคําสั่ง rmdir จะไม่สามารถลบได้ ถ้าเราต้องการลบทั้ง Directory รวมถึงข้อมูลภายในด้วย เราสามารถใช้คําสั่งนี้


Copyright © 2024 thiti.dev |  v1.16.0 |  Privacy policy |  status | 

            วงแหวนเว็บ