Vue中Props是父组件向子组件单向传递数据的唯一正规入口,必须显式声明(数组或对象语法),对象写法支持类型、required、default及validator校验;引用类型default须为函数,子组件不可修改props,应通过emit通知父组件更新。

Vue 中的 Props 是父组件向子组件传递数据的唯一正规入口,定义清晰、校验到位、使用只读,才能避免运行时错误和状态混乱。
怎么在子组件里声明 Props
必须显式声明,Vue 才会把父组件传来的值注入到子组件中。不声明,哪怕父组件写了属性,子组件也访问不到。
-
数组写法:适合快速原型或简单场景,只列名字,不设约束。
props: ['title', 'visible'] -
对象写法:生产环境推荐,支持类型、默认值、必填、自定义校验等完整控制。
props: { title: { type: String, required: true }, count: { type: Number, default: 0 } }
为什么必须做 Props 校验
校验不是“可有可无”,而是防止父组件传错数据导致子组件渲染崩溃或逻辑异常的关键防线。
-
类型检查:比如
type: Boolean能拦截字符串"false"或数字0这类易混淆值 -
必填标识:
required: true让 Vue 在开发阶段就报错,而不是等运行时出问题 -
自定义 validator:适用于业务规则约束,例如
validator: v => ['draft', 'published'].includes(v)
父组件传值要注意什么
传得不对,再严谨的校验也白搭。关键在绑定方式和命名习惯。
立即学习“前端免费学习笔记(深入)”;
-
用冒号(v-bind)传响应式数据:
<Child :user="currentUser" :loading="isLoading"></Child>;不加冒号就是传字符串字面量 -
HTML 属性名用短横线,JS 中用驼峰:父组件写
is-show,子组件 props 声明为isShow,Vue 自动映射 -
避免直接修改 props:子组件需更新数据时,应通过
$emit通知父组件,由父组件修改后重新下发
默认值该怎么设才安全
默认值不是为了“省事”,而是为了兜底——当父组件没传、或传了 undefined 时,保证子组件能正常运行。
-
基础类型:直接写值,如
default: '暂无标题' -
引用类型:必须用函数返回,防止多个实例共享同一对象,如
default: () => ({ name: '', age: 0 }) -
依赖响应式数据:不能在
default函数里访问this,它在组件实例创建前执行


















