เรามาดูวิธีการใช้ props ใน Vue.js กันครับ

Props เป็นวิธีการส่งผ่าน data จาก parent component ไปยัง child component ไปดูตัวอย่างกัน

1. Parent Component

<template>
  <div>
    <ChildComponent v-bind:message="parentMessage"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from the parent'
    }
  }
}
</script>

2. Child Component

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

วิธีอื่น ๆ

เรายังสามารถใช้ v-bind หรือ : ได้ด้วย ตัวอย่าง

<ChildComponent :message="parentMessage"></ChildComponent>

ตัวอย่างแบบ v-bind

<ChildComponent v-bind:message="parentMessage + ' World'"></ChildComponent>