Vue：Props 和 Emits 对比总结

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 对比总结

Vue 2 Options API 中的用法

Vue 3 Composition API /<script setup>中的用法

实际使用示例对比

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>

特殊用法：双向绑定

双向绑定示例

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 向下，Events 向上。

父组件通过 Props 控制子组件的显示，子组件通过 Emits 通知父组件用户交互。