Vueのprops：親から子へデータを渡す – 7/12

Vueでもpropsは「親→子」のデータ受け渡しです。Composition API（script setup）での基本形と、propsを変更しないルールを押さえます。

親から渡す

<UserCard name="Taro" role="admin" />

子で受け取る（defineProps）

<script setup>
const props = defineProps({
  name: String,
  role: String,
})
</script>

<template>
  <p>Name: {{ props.name }}</p>
  <p>Role: {{ props.role }}</p>
</template>

defineProps は script setup の文法です。

注意：propsは子で変更しない

Vueでもpropsは「外から与えられる入力」です。子で直接変更するのは避けます。変更が必要なら

• 親のstateを更新する（イベントで通知）
• もしくは子で別のrefにコピーして扱う

のどちらかにします。

練習問題

1. ProductCard を作り、title と price をpropsで表示してみましょう。
2. 同じカードを3回使って表示を変えてみましょう。