มาดูตัวอย่างการใช้ Props เพื่อรับค่าใน component ใน VueJs กัน

ใน component เราสามารถรับข้อมูลจาก parent ได้ผ่าน props ก่อนอื่นเราต้องไปประกาศไว้ก่อน ตามตัวอย่าง

<!-- ChildComp.vue -->
<script setup>
const props = defineProps({
  msg: String
})
</script>

จากโค้ด เราจะประกาศ defineProps() เพื่อบอกว่าเราจะประกาศใช้ props ที่ชื่อว่า msg

จากนั้นใน parent ที่เรียกใช้ จะใช้ผ่าน v-bind ตามตัวอย่างโค้ด

<ChildComp :msg="greeting" />

ตัวอย่างโค้ดแบบเต็ม

ตัวอย่างโค้ดใน ChildComp.vue

<script setup>
const props = defineProps({
  msg: String
})
</script>

<template>
  <h2>{{ msg || 'No props passed yet' }}</h2>
</template>

จากนั้นใน parent ที่เรียกใช้ จะเป็นตามตัวอย่าง

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const greeting = ref('Hello from parent')
</script>

<template>
  <ChildComp :msg="greeting" />
</template>