Vue 3 组件通信深度解析：Props 与 Emit
在 Vue.js 开发中，构建应用的过程就像是搭建乐高积木。每个组件（积木块）都封装了自己的逻辑和样式，但为了让它们组合成一个功能完整的城堡，它们必须能够相互交流。
Vue 提倡一种非常严格且清晰的通信模式：数据向下流动 (Data Down)，事件向上冒泡 (Events Up)。
这篇文章将带你深入理解 Props（父传子）和 Emit（子传父）的底层逻辑，掌握类型验证等进阶技巧，并解释为什么 Vue 如此坚持“单向数据流”。
- 核心概念：单向数据流 (One-Way Data Flow)
这是 Vue 组件通信的第一条铁律，也是理解 Vue 数据流向的基石。
1.1 数据的“所有权”
在组件树中，父组件 拥有数据的所有权。数据应当由父组件维护，并通过 Props 流向子组件。
父组件：数据的生产者和管理者。
子组件：数据的消费者。
1.2 禁止反向修改
子组件绝不应该直接修改收到的 Props。
如果你尝试在子组件里写 props.title = '新标题'，Vue 会在控制台抛出黄色警告。
为什么？
如果子组件可以随意修改父组件的数据，当应用变复杂时（例如一个数据被多个子组件共享），你将无法追踪数据到底是在哪里被改变的。这会导致数据状态变得不可预测，引发难以调试的 Bug。
1.3 常见的“对象引用”陷阱
需要特别注意的是，在 JavaScript 中，对象和数组是按“引用”传递的。
虽然 Vue 禁止你重新赋值 prop（例如 props.user = {}），但它无法完全阻止你修改对象内部的属性（例如 props.user.name = 'Bob'）。
⚠️ 警告：虽然这样做不会报错，但它依然违背了单向数据流原则。因为它会悄悄地改变父组件的状态，导致数据流向混乱。正确的做法始终是抛出事件 (emit)，让父组件自己去修改。
- Props：父传子 (Data Down)
Props 是子组件接收外部数据的自定义属性/接口。
2.1 声明与传递
传递：父组件在模板中通过 :prop-name="value" 的形式传递动态数据，或者 prop-name="value" 传递静态字符串。
声明：子组件必须显式声明它接受哪些 props。
2.2 进阶：Props 验证 (Prop Validation)
在生产环境中，只声明 props 的名称是不够的。为了让组件更健壮，你需要为 props 指定类型、默认值甚至自定义验证函数。
props: {
// 基础类型检查
title: String,
// 必填项
price: {
type: Number,
required: true
},
http://www.baidu.com/link?url=UK9M1kYPo9nuMx1XaXo4eSngXtmNqc6y19LbKAnD_hBUHfvpc9EzrR5yzqyjJJbKRV8LOHFunrx_607wHRPVtK
// 带有默认值的对象
// 注意：对象或数组的默认值必须从一个工厂函数返回
config: {
type: Object,
default(rawProps) {
return { theme: 'dark' }
}
},
// 自定义验证函数
status: {
type: String,
validator(value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].includes(value)
}
}
}
2.3 命名规范
在 JavaScript 中：使用 camelCase (驼峰命名法)，例如 props.productName。
在 HTML 模板中：使用 kebab-case (短横线命名法)，例如
Vue 会自动处理这两者之间的转换。
- Emit：子传父 (Events Up)
既然子组件不能修改 props，那它想改变数据怎么办？（比如用户点击了子组件里的“删除”按钮）。
它必须通知父组件，请求父组件来执行修改。
3.1 触发与监听
触发：子组件使用 $emit('event-name', payload) 抛出一个事件。payload 是可选的参数，用于传递具体的数据。
监听：父组件像监听原生 DOM 事件（如 click）一样，使用 @event-name="handler" 监听这个自定义事件。
3.2 声明 Emits (Vue 3 推荐)
为了让组件的行为更清晰，Vue 3 建议我们在组件中显式声明它会抛出哪些事件。这不仅有助于文档化，还能让 Vue 自动校验事件。
// 声明该组件会触发的事件
emits: ['add-to-cart', 'delete-item'],
// 或者对象语法进行验证
emits: {
'add-to-cart': (id) => {
if (id) return true; // 验证通过
console.warn('add-to-cart 事件缺少 id 参数');
return false;
}
}
- 实战案例：购物车计数器
我们将构建一个简单的父子组件系统，演示完整的交互流程。
父组件 (App)：维护一个商品列表和总价。它是数据的“单一事实来源”。
子组件 (ProductItem)：展示单个商品，并包含“加入购物车”按钮。它只负责展示和通知。
我们将代码逻辑拆解为三个部分：
4.1 子组件逻辑 (ProductItem)
子组件负责声明它需要什么数据 (props)，验证这些数据，并在用户交互时发送通知 (emit)。
const ProductItem = {
// 1. 严格的 Props 声明
props: {
id: {
type: Number,
required: true
},
name: {
type: String,
required: true
},
price: {
type: Number,
required: true
}
},
// 2. 声明抛出的事件
emits: ['add-to-cart'],
// setup 函数的第二个参数 context 中包含 emit 方法
setup(props, { emit }) {
const notifyParent = () => {
// 核心：子组件不直接修改数据，而是发出通知
// 我们把商品的 id 和 price 打包发给父组件
// 这里的 { id: ..., price: ... } 就是 payload
emit('add-to-cart', {
id: props.id,
price: props.price
});
};
return { notifyParent };
},
// 子组件模板
template: `
<div class="product-item">
<h3>{{ name }}</h3>
<p>单价: ¥{{ price }}</p>
<!-- 点击按钮，触发 emit -->
<button @click="notifyParent">加入购物车</button>
</div>
`
};
4.2 父组件逻辑 (App)
父组件负责持有真实的数据源，并定义处理函数来响应子组件的请求。
const { ref } = Vue;
const App = {
components: {
ProductItem // 注册子组件
},
setup() {
// 父组件拥有的数据 (Source of Truth)
const products = ref([
{ id: 1, name: '机械键盘', price: 399 },
{ id: 2, name: '无线鼠标', price: 129 },
{ id: 3, name: '显示器支架', price: 199 }
]);
const totalPrice = ref(0);
const lastAddedItem = ref('');
// 处理函数：当接收到子组件的 'add-to-cart' 事件时执行
// payload 参数就是子组件 emit 出来的那个对象
const handleAddToCart = (payload) => {
console.log(`收到通知，商品ID: ${payload.id}, 价格: ${payload.price}`);
// 父组件执行修改数据的逻辑
totalPrice.value += payload.price;
lastAddedItem.value = `刚刚添加了 ID 为 ${payload.id} 的商品`;
};
return {
products,
totalPrice,
lastAddedItem,
handleAddToCart
};
}
};
4.3 模板结合 (HTML Usage)
在 HTML 中，我们通过属性绑定 (😃 和事件监听 (@) 将两者连接起来。
<div class="header">
<h2>商品列表</h2>
<div class="status-bar">
<span class="total-price">购物车总额: ¥{{ totalPrice }}</span>
<span class="last-log" v-if="lastAddedItem">{{ lastAddedItem }}</span>
</div>
</div>
<!--
核心交互：
1. :name="item.name" -> 数据向下传递 (Props)
2. @add-to-cart="handle..." -> 事件向上传递 (Emit)
注意：我们把 item.id 既作为 key 使用，也作为 prop 传给子组件
-->
<product-item
v-for="item in products"
:key="item.id"
:id="item.id"
:name="item.name"
:price="item.price"
@add-to-cart="handleAddToCart"
></product-item>
http://www.baidu.com/link?url=k2bw-wIH1_9PQPElptsEk32UVITswWHgHqU2my-2wE_
- 关键点总结
在这个例子中，数据流动的闭环是完美的：
向下 (Props)：399 这个数字定义在父组件的 products 数组中，通过 :price="item.price" 流入子组件。子组件只负责只读地展示它。
向上 (Emit)：当用户点击按钮，子组件没有直接去改父组件的 totalPrice。它通过 emit('add-to-cart', payload) 发送了一个“信号”。
处理 (Handler)：父组件捕获了这个信号（@add-to-cart），并执行了自己的 handleAddToCart 方法来更新状态。
这种单向数据流模式保证了数据源的唯一性和可预测性。无论应用变得多大，你总是知道：数据在哪里定义的（父组件），以及数据是在哪里被触发修改的（通过事件）。
浙公网安备 33010602011771号