Vue2组件开发如何通过 props 选项向子组件传递静态与动态数据

Vue2中props传值需区分静态字符串与动态表达式：不加冒号传字符串字面量，加冒号（v-bind）才解析JS值；props推荐对象声明以校验类型、设默认值及必填项；模板中用短横线命名，JS中用驼峰。

Vue2 中通过 props 向子组件传值，关键在于区分“静态字符串”和“动态表达式”两种场景——不加冒号是传字符串字面量，加冒号（v-bind）才解析为 JS 值。

静态数据：直接写属性，值当字符串处理

适合传递固定文本、标识符等纯字符串内容。Vue 不会做类型转换，所有值都以字符串形式进入子组件。

1. 父组件写法：<my-button text="提交"></my-button>
2. 子组件声明：props: ['text']，此时 this.text 是字符串 "提交"
3. 常见误用：写 count="5"，子组件收到的是字符串 "5"，不是数字 5

动态数据：必须加冒号，触发 JS 表达式求值

要传数字、布尔、对象、数组或变量时，必须用 :（即 v-bind），否则一律转成字符串。

1. 传数字：<my-input :max="100"></my-input> → this.max 是数字 100
2. 传布尔：<my-dialog :visible="isDialogOpen"></my-dialog> → this.visible 是 true/false
3. 传对象/数组：<user-list :users="userList"></user-list> → 直接传响应式数据引用

props 声明方式影响类型安全与健壮性

仅用数组声明（如 props: ['title']）最简，但无法校验；推荐用对象形式明确约束。

1. 指定类型：title: String 或 count: Number，传错类型 Vue 会警告
2. 设默认值：size: { type: String, default: 'medium' }，避免 undefined
3. 必填校验：id: { type: [String, Number], required: true }

注意命名与模板写法的对应关系

props 在 JS 中用驼峰（userName），但在模板中必须写短横线（user-name）。

1. 子组件声明：props: ['userName']
2. 父组件使用：<user-card user-name="张三"></user-card>（静态）或 <user-card :user-name="name"></user-card>（动态）
3. 错误写法：user-name="张三" 且未声明 userName，或声明了 userName 却在模板写 username