前端Wiki/词条/props 与 emit

props 与 emit

定义父组件通过 props 向下传数据、子组件通过 emit 向上发事件的最常用组件通信方式

props 与 emit 构成 Vue 父子组件通信的主干道：父组件以属性形式传入 props，子组件用 defineProps 声明接收并严格限定类型；子组件用 defineEmits 声明可以触发的事件，父组件再以事件名监听。数据因此保持单向流动，子组件永远不直接改父组件的数据，需要变化时 emit 一个事件交由父组件处理。

声明式写法让组件接口一目了然，也方便对接 TypeScript 类型推导。子组件修改 props 会被警告，数组与对象类型的 props 按引用传递时也不例外，仍不应在子组件内部直接改动。约定上事件名用 kebab-case，props 名用 camelCase，模板绑定与监听时两边都自然衔接。

defineProps 声明入参，defineEmits 声明可触发的事件
数据单向流动：子组件不直接改 props，要改就 emit 事件
对象/数组 props 按引用传递，但仍不应在子组件里改它

JavaScript

// 子组件
const props = defineProps({ title: String, count: { type: Number, default: 0 } });
const emit = defineEmits(['update']);

function handleClick() { emit('update', props.count + 1); }

// 父组件模板：
// <ChildComp title="标题" :count="n" @update="n = $event" />

⚠ 常见误区

子组件直接给 props 赋值触发警告，却不知道该用 emit 上报
emit 的事件名与父组件监听的名字大小写不匹配导致接收不到
props 没声明类型与默认值，组件接口变得难以维护

🔗 相关词条组件与 props 自定义事件与双向绑定