vue3props传参完整写法

### Vue3 中 Props 传参的完整写法和规范 在 Vue3 中，`props` 是实现父组件向子组件传递数据的主要方式之一。以下是 `props` 的完整写法及其规范： #### 基本语法 `props` 可以是一个数组或对象。当作为数组时，仅指定允许传入的属性名；而作为对象时，则可以定义更详细的配置。 ```javascript // 数组形式（简单声明） props: ['title', 'content'] // 对象形式（详细声明） props: { title: String, content: { type: String, required: true, // 是否必填 default: '', // 默认值 validator(value) { // 自定义验证逻辑 return value.length < 10; } }, } ``` #### 类型支持 Vue 支持多种类型的 `prop`，包括但不限于以下类型： - `String` - `Number` - `Boolean` - `Array` - `Object` - `Date` - `Function` - `Symbol` 如果需要自定义复杂类型，可以通过 JavaScript 构造函数来表示[^1]。 --- #### 示例代码 下面通过一个完整的例子展示如何使用 `props` 进行父子组件间的通信。 ##### 父组件 ```html <template> <child-component :title="postTitle" :content="postData"></child-component> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { postTitle: 'Hello Vue3', postData: 'This is a sample of props communication.', }; }, }; </script> ``` ##### 子组件 ```html <template> <div class="card"> <h2>{{ title }}</h2> <p>{{ content }}</p> </div> </template> <script> export default { props: { title: { type: String, required: true, }, content: { type: String, required: false, default: '', }, }, }; </script> ``` 在这个示例中，父组件通过绑定 `:title` 和 `:content` 将数据传递给子组件。子组件则通过 `props` 接收这些数据并渲染到页面上[^1]。 --- #### 动态 Props 动态 `props` 允许根据父组件的状态变化实时更新子组件的数据。例如： ```html <template> <child-component :counter="currentCount"></child-component> </template> <script> export default { data() { return { currentCount: 0, }; }, mounted() { setInterval(() => { this.currentCount++; }, 1000); }, }; </script> ``` 在这种情况下，每当 `currentCount` 更新时，子组件中的对应 `prop` 也会自动同步更新[^3]。 --- #### 路由中的 Props 配置 除了普通的父组件向子组件传参外，还可以利用路由规则中的 `props` 属性简化参数传递过程。具体有三种写法： 1. **布尔值模式 (`props: true`)** 当设置为 `true` 时，会将路由的 `params` 参数映射为组件的 `props`。 2. **对象模式 (`props: {}`)** 使用固定的键值对作为 `props` 数据。 3. **函数模式 (`props(route)`)** 返回基于当前路由的对象，适用于复杂的场景，比如混合 `query` 或 `params` 参数。 ```javascript const routes = [ { path: '/user/:id', component: UserDetail, props: true, // 映射 params 到 props }, ]; ``` 此方法特别适合单页应用 (SPA)，能够减少手动解构路由参数的工作量[^2]。 --- #### 注意事项 1. **单向数据流**：`props` 应该被视为只读数据，任何试图修改它们的行为都会触发警告。若需更改，应通过事件通知父级重新赋值[^4]。 2. **默认值与校验**：合理设定 `default` 和 `validator` 函数有助于提升代码健壮性和可维护性。 3. **性能优化**：对于大型项目，建议优先采用显式的 `type` 定义而非隐式推断，便于静态分析工具检测潜在错误。 ---