Vue Props详解
封面图
•
2025-11-18
•
Vue
0
0
0
0
在 Vue.js 中,**props** 是组件之间传递数据的一种方式。通过 props,父组件可以将数据传递给子组件,从而实现组件间的通信。下面是对 Vue Props 的详细讲解: --- ## 一、什么是 Props? `props` 是 **Vue 组件中用于接收外部传入数据的属性**。它们是只读的,不能在子组件内部直接修改。 > ✅ **props 是从父组件传递到子组件的数据** --- ## 二、使用 Props ### 1. 在子组件中声明 props ```js // ChildComponent.vue export default { props: { message: String, count: Number, isActive: Boolean, user: Object, items: Array } } ``` 或者使用更详细的类型校验(推荐): ```js props: { message: { type: String, required: true, default: '默认消息' }, count: { type: Number, default: 0 } } ``` ### 2. 在父组件中传递 props ```vue <template> <ChildComponent :message="parentMessage" :count="parentCount" /> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { parentMessage: '这是来自父组件的消息', parentCount: 42 } } } </script> ``` --- ## 三、props 的类型校验 Vue 提供了强大的 props 类型校验功能,支持以下类型: | 类型 | 说明 | |------------|------------------------------| | `String` | 字符串 | | `Number` | 数字 | | `Boolean` | 布尔值 | | `Array` | 数组 | | `Object` | 对象 | | `Date` | 日期 | | `Function` | 函数 | | `Symbol` | Symbol 类型 | 示例: ```js props: { name: { type: String, required: true }, age: { type: Number, default: 18 }, tags: { type: Array, default: () => ['tag1', 'tag2'] } } ``` --- ## 四、props 的注意事项 ### 1. props 是只读的 不要在子组件中直接修改 props 的值,否则会引发警告(在开发模式下)。 ✅ 正确做法:如果需要修改,应该通过事件通知父组件,由父组件更新数据。 ### 2. prop 的命名规则 - 在 JavaScript 中使用驼峰命名法(`userName`) - 在模板中使用短横线命名法(`user-name`) ```vue <!-- 父组件 --> <ChildComponent :user-name="userName" /> <!-- 子组件 --> props: { userName: String } ``` ### 3. 默认值设置 使用 `default` 属性为 props 设置默认值,适用于非必需的 props。 ```js props: { theme: { type: String, default: 'light' } } ``` ### 4. 必需的 props 使用 `required: true` 标记该 prop 是必须的: ```js props: { id: { type: Number, required: true } } ``` --- ## 五、Prop 的验证函数 你可以使用函数来验证 prop 的值是否符合预期: ```js props: { rating: { validator: function (value) { return value >= 0 && value <= 10 } } } ``` --- ## 六、动态绑定 props 使用 `v-bind` 或简写 `:` 来动态绑定 props: ```vue <ChildComponent :message="dynamicMessage" /> ``` --- ## 七、Prop 的作用域 props 是 **单向数据流** 的一部分,意味着: - **父组件 → 子组件**:通过 props 传递数据 - **子组件 → 父组件**:通过 `$emit` 触发事件 --- ## 八、总结 | 特性 | 说明 | |----------------|----------------------------------------------------------------------| | 定义位置 | 在子组件的 `props` 选项中定义 | | 数据流向 | 父组件 → 子组件(单向) | | 可读性 | 只读,不可修改 | | 类型校验 | 支持多种类型校验和自定义验证函数 | | 命名规范 | JS 使用驼峰,模板中使用短横线 | | 默认值 | 使用 `default` 设置默认值 | | 必需性 | 使用 `required` 标记是否必须 | | 动态绑定 | 使用 `v-bind` 或 `:` 实现动态传递 | --- ## 九、示例代码 ### 父组件(ParentComponent.vue) ```vue <template> <div> <ChildComponent :message="msg" :count="num" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { msg: 'Hello from parent', num: 100 } } } </script> ``` ### 子组件(ChildComponent.vue) ```vue <template> <div> <p>{{ message }}</p> <p>Count: {{ count }}</p> </div> </template> <script> export default { props: { message: { type: String, required: true }, count: { type: Number, default: 0 } } } </script> ``` --- 如果你有更多关于 Vue 的问题,比如 `v-model`、`$emit`、`slots` 等,也可以继续问我 😊
上一篇:
Vue 生命周期
下一篇:
Vue组件事件
标题录入,一次不能超过6条
留言
评论