コンポーネントは、再利用可能で自己完結型の UI の部分です。Props は、親が子に データを下に渡す方法です — それらは子の型付けされた読み取り専用入力です。
子の props を定義する
vue
<!-- UserCard.vue -->
<script setup>
// declare props with types, requirements, and defaults
const props = defineProps({
name: { type: String, required: true },
age: { type: Number, default: 0 },
isAdmin: { type: Boolean, default: false },
});
</script>
<template>
<div class="card">
<h2>{{ name }}</h2> <!-- use props directly in the template -->
<p>Age: {{ age }}</p>
</div>
</template>
親から props を渡す
vue
<template>
<UserCard name="Ann" :age="30" :is-admin="true" />
<!-- static string: name="Ann" | dynamic (any JS): :age="30" -->
</template>
