Vue中父组件向子组件传值最标准方式是props，采用单向数据流，子组件通过数组、对象（推荐）或TypeScript接口声明接收，父组件用v-bind动态绑定，props只读且支持类型校验与默认值。
Vue 中父组件向子组件传值，最标准、最推荐的方式就是用 props。它本质是单向数据流：父组件把数据“推”给子组件，子组件只能读取，不能直接修改——这保证了数据流向清晰、可追踪。
子组件声明接收 props
子组件必须明确告诉父组件：“我准备接收哪些数据”。方式有三种，推荐使用对象形式（校验强、可设默认值）：
-
数组写法：简单场景，仅声明属性名，如
props: ['title', 'content'] -
对象写法（推荐）：支持类型检查、是否必填、默认值和自定义校验，例如：
props: {<br> title: { type: String, required: true },<br> count: { type: Number, default: 0 },<br> user: { type: Object, default: () => ({ name: 'Guest' }) }<br>} -
TypeScript 接口写法（Vue 3 + TS）：类型安全更进一步，如
defineProps<{ title: string; count?: number }>()
父组件动态绑定数据
父组件在使用子组件标签时，用 v-bind（简写为 :）把数据绑定到对应 props 名上：
- 静态传值：
<ChildComponent title="首页"></ChildComponent>（字符串字面量） - 动态传值：
<ChildComponent :title="pageTitle" :count="pageViews"></ChildComponent>（绑定 data 或 ref 中的响应式变量） - 注意命名规范：HTML 模板中用短横线（
is-show），子组件内自动映射为小驼峰（isShow）
数据更新与只读限制
props 是只读的。一旦父组件的数据变化，子组件会自动更新显示；但子组件若尝试直接赋值（如 this.title = 'new'），Vue 会发出警告。
立即学习“前端免费学习笔记（深入）”；
- 如需修改，应在父组件中变更源数据，再通过 props 向下同步
- 若需子组件“拥有自己的副本”，可在
data()或ref()中基于 props 初始化本地变量 - 不建议用
computed包裹 props 来做派生计算，除非是只读转换（如格式化）
常见问题与规避
实际开发中容易踩坑的地方：
- 父组件没传值，但子组件又没设
default→ 显示undefined，建议对关键 props 设默认值 - 传了错误类型（比如该传数组却传了字符串）→ Vue 会在开发环境给出控制台警告，生产环境静默
- 对象/数组类型 props 的默认值必须是函数返回（避免多个实例共享同一引用）
- Vue 3 的
<script setup>中，用defineProps()声明，无需export default对象写法
