Props与Emits对比摘要
核心区别：Props实现父→子单向数据流（用于配置），Emits实现子→父事件通知（用于交互）。
特性对比：
- 数据流：Props向下传递只读数据，Emits向上触发事件
- 验证：Props支持类型/默认值验证，Emits无内置验证
- Vue3优化：均支持TS类型推断，Composition API提供defineProps/defineEmits
使用场景：
- Props：初始化配置/展示数据
- Emits：用户交互反馈/状态变更通知
最佳实践：
- 遵循单向数据流原则
- 为复杂数据添加验证
- 使用kebab-case命名事件
- 避免直接修改Props
特殊用法：v-model本质是Props+Emits的组合语法糖。
Props 和 Emits 对比总结
| 对比维度 | Props（属性） | Emits（事件） |
|---|---|---|
| 数据流向 | 父 → 子（单向向下） | 子 → 父（单向向上） |
| 作用 | 父组件向子组件传递数据 | 子组件向父组件通知事件 |
| 使用场景 | 配置子组件、传递初始数据 | 用户交互反馈、状态变化通知 |
| 是否可变 | 只读（子组件不应直接修改） | 可触发多次，传递不同数据 |
| 响应式 | 在子组件中是响应式的 | 事件本身不是响应式的，但可传递响应式数据 |
Vue 2 Options API 中的用法
| 特性 | Props | Emits |
|---|---|---|
| 声明方式 | props: ['title', 'content']或对象形式 | emits: ['submit', 'change']（Vue 2.3+） |
| 类型验证 | 支持完整类型验证 | 无内置验证（Vue 2 中） |
| 默认值 | 通过default属性设置 | 不适用 |
| 必需性 | 通过required: true设置 | 不适用 |
| 代码示例 | props: {<br> title: {<br> type: String,<br> required: true<br> }<br>} | emits: ['update:modelValue'] |
Vue 3 Composition API /<script setup>中的用法
| 特性 | Props | Emits |
|---|---|---|
| 声明方式 | defineProps() | defineEmits() |
| 类型验证 | 支持对象和泛型两种方式 | 支持数组和对象两种方式 |
| TypeScript | 完美支持类型推断 | 完美支持类型推断 |
| 访问方式 | 通过props.xxx访问 | 通过emit('event', data)触发 |
| 代码示例 | const props = defineProps<{<br> title: string,<br> count?: number<br>}>() | const emit = defineEmits<{<br> (e: 'submit', data: any): void<br>}>() |
实际使用示例对比
Props 示例
<!-- 父组件 Parent.vue --> <template> <!-- 传递 props --> <ChildComponent :title="pageTitle" :count="counter" /> </template> <!-- 子组件 Child.vue --> <template> <h1>{{ title }}</h1> <p>计数: {{ count }}</p> </template> <script setup> // Vue 3 Composition API const props = defineProps({ title: String, count: { type: Number, default: 0 } }) </script>Emits 示例
vue
<!-- 子组件 Child.vue --> <template> <button @click="handleClick">提交</button> </template> <script setup> // Vue 3 Composition API const emit = defineEmits(['submit', 'update:value']) const handleClick = () => { // 触发事件并传递数据 emit('submit', { id: 1, data: 'test' }) emit('update:value', 'new value') } </script> <!-- 父组件 Parent.vue --> <template> <!-- 监听事件 --> <ChildComponent @submit="handleSubmit" @update:value="value = $event" /> </template>特殊用法：双向绑定
| 模式 | 实现方式 | 说明 |
|---|---|---|
| v-model | props: modelValue+emits: update:modelValue | Vue 3 默认方式 |
| v-model:propName | props: propName+emits: update:propName | Vue 3 参数化 v-model |
| .sync 修饰符 | props: xxx+emits: update:xxx | Vue 2 方式（Vue 3 已废弃） |
双向绑定示例
vue
<!-- 子组件 CustomInput.vue --> <script setup> const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue']) const updateValue = (event) => { emit('update:modelValue', event.target.value) } </script> <template> <input :value="modelValue" @input="updateValue" /> </template> <!-- 父组件使用 --> <template> <!-- Vue 3 默认 v-model --> <CustomInput v-model="username" /> <!-- Vue 3 参数化 v-model --> <CustomInput v-model:firstName="first" v-model:lastName="last" /> </template>最佳实践对比
| 最佳实践 | Props | Emits |
|---|---|---|
| 命名规范 | 使用 camelCase 声明，kebab-case 传递 | 使用 kebab-case 命名事件 |
| 数据验证 | 始终添加类型验证和默认值 | 为复杂数据添加验证函数 |
| 单向数据流 | 不要直接修改 props，使用 emits 通知父组件修改 | 传递最小必要数据，避免传递整个对象 |
| TypeScript | 使用泛型语法获得更好的类型安全 | 为事件定义完整类型签名 |
| 文档注释 | 为每个 prop 添加 JSDoc 注释说明用途 | 为每个事件添加注释说明触发时机 |
常见错误对比
| 错误类型 | Props 相关错误 | Emits 相关错误 |
|---|---|---|
| 语法错误 | 使用 v-bind 传递动态值：:prop="value" | 监听事件使用 @ 或 v-on：@event="handler" |
| 逻辑错误 | 在子组件中修改 props（违反单向数据流） | 在父组件中直接修改子组件数据（应通过事件） |
| 性能问题 | 传递大型对象导致不必要的重新渲染 | 频繁触发高开销的事件处理函数 |
| 类型错误 | 传递错误类型的数据（类型验证可捕获） | 事件参数类型与处理函数期望类型不匹配 |
选择指南
| 场景 | 应该使用 Props | 应该使用 Emits |
|---|---|---|
| 配置子组件 | ✅ 传递初始配置、样式参数 | ❌ |
| 用户交互反馈 | ❌ | ✅ 按钮点击、表单提交 |
| 数据展示 | ✅ 传递要显示的数据 | ❌ |
| 状态变化通知 | ❌ | ✅ 数据更新、组件状态变化 |
| 表单输入 | ✅ 接收初始值 | ✅ 输入变化时通知父组件 |
核心原则：Props 向下，Events 向上。
父组件通过 Props 控制子组件的显示，子组件通过 Emits 通知父组件用户交互。
