Vue 3 组件（Components）属性（Props）详解
Vue 3 是目前主流的前端框架之一，组件化开发是其核心思想之一。组件通过属性（props）接收外部传入的数据，从而实现灵活复用和数据解耦。理解如何定义和使用组件属性，是掌握 Vue 3 开发的关键一步。
核心概念
组件属性（props）是 Vue 3 中用于从父组件向子组件传递数据的机制。props 类似于函数的参数，是只读的，不能在子组件中直接修改。它们定义在组件的 props 选项中，可以是基本类型（如字符串、数字），也可以是对象或数组等复杂类型。
为什么需要 props？想象你有一个按钮组件，你希望它可以显示不同的文字和颜色。通过 props，你可以动态地控制这些值，而不是将它们写死在组件内部。
基础语法
定义 props 最基本的方式是通过 props 选项声明。例如：
export default {
props: {
message: String
},
template: `<div>{{ message }}</div>` // 接收 message 并在模板中使用
}
在父组件中，通过绑定属性的方式传值：
<template>
<MyComponent :message="helloMessage" />
</template>
<script setup>
import MyComponent from './MyComponent.vue'
const helloMessage = ref('Hello Vue 3')
</script>
多个 props 的定义
当组件需要接收多个属性时，可以一次性声明多个 props：
export default {
props: {
title: String,
count: Number,
isActive: Boolean
},
template: `<div>{{ title }} - {{ count }} - {{ isActive ? '激活' : '未激活' }}</div>`
}
默认值
可以为 props 设置默认值，这样即使父组件没有传入，子组件也能正常运行：
export default {
props: {
color: {
type: String,
default: 'blue'
}
},
template: `<div style="color: {{ color }}">文字</div>`
}
必填属性
通过 required: true 可以标记某个 prop 为必填项：
export default {
props: {
username: {
type: String,
required: true
}
},
template: `<div>欢迎，{{ username }}</div>`
}
如果父组件没有传入 username，Vue 3 会在控制台提示错误，便于调试。
进阶特性
在实际开发中，props 不仅是简单的值传递，还可以支持更复杂的数据类型，如对象和数组。同时，Vue 3 提供了更灵活的 props 验证方式。
对象和数组类型的 props
export default {
props: {
user: Object,
tags: Array
},
template: `
<div>用户：{{ user.name }}</div>
<div>标签：{{ tags.join(', ') }}</div>
`
}
父组件中传入对象或数组：
<template>
<MyComponent
:user="userObj"
:tags="tagList"
/>
</template>
<script setup>
import MyComponent from './MyComponent.vue'
const userObj = {
name: '张三',
age: 25
}
const tagList = ['前端', 'Vue', 'JavaScript']
</script>
Props 验证
Vue 3 允许你在定义 props 时加入验证规则，提升代码健壮性：
export default {
props: {
age: {
type: Number,
default: 18,
validator(value) {
return value >= 0 && value <= 120
}
}
},
template: `<div>年龄：{{ age }}</div>`
}
使用 props 在 setup 语法中
在 <script setup> 语法中，props 是通过 defineProps 来声明的，更加简洁：
<script setup>
const props = defineProps({
title: String,
count: Number
})
</script>
<template>
<div>{{ title }} - {{ count }}</div>
</template>
实战应用
在实际项目中，props 是组件间通信的重要手段。以下是一个常见的使用场景：一个 Card 组件，用于展示用户信息。
定义 Card 子组件
export default {
props: {
user: {
type: Object,
required: true
}
},
template: `
<div class="card">
<h3>{{ user.name }}</h3>
<p>年龄：{{ user.age }}</p>
<p v-if="user.email">邮箱：{{ user.email }}</p>
</div>
`
}
父组件中使用
<script setup>
import Card from './Card.vue'
const user = {
name: '李四',
age: 30,
email: 'lisi@example.com'
}
</script>
<template>
<Card :user="user" />
</template>
这种结构使得组件可以被灵活复用，比如在用户列表中重复渲染 Card，只需传入不同的 user 对象即可。
注意事项
- 不要在子组件中直接修改 props：props 是只读的，修改会导致警告或错误。如果需要修改，应使用
emit触发事件，由父组件更新。 - 不要忘记验证 props 类型：尤其是在大型项目中，props 类型验证可以防止运行时错误。
- 避免在 props 中传递方法：应使用
emit而不是 props 传递方法，避免组件间的耦合。 - 保持 props 简洁：一个组件接收太多 props 会导致维护困难，建议将 props 分组或封装为对象。
合理使用 Vue 3 的组件属性，可以让代码更清晰、组件更灵活。