Components 是可复用的、独立的 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>
注意区别： 传递的是字面字符串，而 （带有 ）计算一个表达式 — 这对数字、布尔值、对象或变量是必需的。另外还要注意，prop 名称在 JS 中是 ，但在模板中是 （ → ）。