一、Props 是什么想象一下你正在组装一个乐高机器人。机器人的头部、手臂、腿部都是独立的组件。为了让手臂知道它应该连接在身体的哪个位置你需要给它一个“连接点”的指令。在 Vue3 中Props就是这个“指令”它是父组件向子组件传递数据的一种方式。简单来说Props 是组件的自定义属性父组件通过它来给子组件“喂”数据。二、Props 的核心作用Props 主要解决组件间的通信问题具体作用如下数据传递父组件可以把数据字符串、数字、数组、对象等传递给子组件。配置组件通过传递不同的 Props 值可以让同一个子组件呈现不同的状态或行为实现复用。单向数据流数据只能从父组件流向子组件这保证了数据变化的可预测性便于调试。类型检查Vue3 的 Composition API 和 script setup 语法支持对 Props 进行类型定义提升代码健壮性。三、Props 的属性Props 选项在 Vue3 中定义 Props 时可以配置多种属性来约束和描述数据。以下是常用的 Props 属性type指定 Prop 的数据类型如String、Number、Boolean、Array、Object、Date、Function、Symbol或自定义构造函数。required布尔值表示该 Prop 是否为必传项。default指定 Prop 的默认值。可以是固定值也可以是一个返回默认值的函数。validator自定义验证函数用于校验传入的 Prop 值是否有效。四、如何接受和使用 Props代码案例1. 使用 script setup 语法推荐这是 Vue3 组合式 API 中最简洁的写法。提示带有define开头的都是宏声明属性不需要引入!-- 子组件 ChildComponent.vue -- template div h3子组件/h3 p接收到的标题{{ title }}/p p接收到的数量{{ count }}/p p用户信息{{ user.name }} ({{ user.age }}岁)/p ul li v-foritem in items :keyitem{{ item }}/li /ul /div /template script setup // 使用 defineProps 宏来声明 Props const props defineProps({ // 类型 必填 title: { type: String, required: true }, // 类型 默认值 count: { type: Number, default: 0 }, // 对象类型 默认值函数 user: { type: Object, default: () ({ name: 匿名, age: 18 }) }, // 数组类型 items: { type: Array, default: () [] }, // 自定义验证器 score: { type: Number, validator: (value) { return value 0 value 100; } } }); // 在模板或逻辑中直接使用 props.title, props.count 等 console.log(props.title); /script!-- 父组件 ParentComponent.vue -- template div h2父组件/h2 ChildComponent title用户列表 :countuserCount :usercurrentUser :itemstodoList :score85 / /div /template script setup import { ref } from vue; import ChildComponent from ./ChildComponent.vue; const userCount ref(5); const currentUser ref({ name: 张三, age: 25 }); const todoList ref([学习 Vue, 写代码, 阅读文档]); /script补充数组形式的 defineProps除了使用对象形式定义 Props 外defineProps也支持简单的数组形式。defineProps 是有返回值的script setup // 数组形式仅声明属性名所有属性类型默认为任意类型 const props defineProps([title, count, user]); // 在模板中可以直接使用 console.log(props.title); // 来自父组件传递的值 console.log(props.count); /script推荐做法在正式项目中为了更好的代码健壮性和开发体验建议使用对象形式如上方示例或 TypeScript 泛型形式来定义 Props以便获得完整的类型检查和 IDE 提示。2. 使用 TypeScript 与类型标注结合 TypeScript 可以获得更完善的类型提示和检查。!-- 子组件 ChildComponent.vue -- template !-- 同上 -- /template script setup langts interface User { name: string; age: number; } // 使用接口定义 Props 类型 interface Props { title: string; count?: number; // 可选 user: User; items: string[]; score?: number; } // 使用泛型 defineProps const props definePropsProps(); // 或者提供默认值需要 withDefaults 辅助函数 const propsWithDefaults withDefaults(definePropsProps(), { count: 0, user: () ({ name: 匿名, age: 18 }), items: () [], }); /script3. 使用选项式 API这是 Vue2 风格的写法在 Vue3 中仍然兼容。!-- 子组件 ChildComponent.vue -- template !-- 同上 -- /template script export default { name: ChildComponent, // 在 props 选项中声明 props: { title: { type: String, required: true }, count: { type: Number, default: 0 }, user: { type: Object, default: () ({ name: 匿名, age: 18 }) }, items: { type: Array, default: () [] }, score: { type: Number, validator: function(value) { return value 0 value 100; } } }, setup(props) { // 在 setup 函数中访问 props console.log(props.title); return {}; } } /script五、使用 Props 的注意事项单向数据流不要在子组件内部直接修改 PropsVue 会警告。如果需要修改应该在子组件内定义一个新的响应式数据如使用ref或computed来接收 Prop 的初始值。Prop 命名在 JavaScript 中使用 camelCase如userName在模板中建议使用 kebab-case如user-name。动态与静态传递使用:绑定是动态传递响应式不使用:是静态字符串传递。复杂对象默认值对象或数组的default必须是一个工厂函数返回新对象避免多个组件实例共享同一引用。