写日志！运营程序

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 中，我们通过属性绑定 (😃 和事件监听 (@) 将两者连接起来。

http://www.baidu.com/link?url=9WkWJwt4mjF9CWZ9c3Z4YRR9Uy8feU7uJx5U5P0Zbij9tr_W-EvonnlBWdIIWrTA

<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"

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 会自动处理这两者之间的转换。

3. 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;
}
}

4. 实战案例：购物车计数器

我们将构建一个简单的父子组件系统，演示完整的交互流程。

父组件 (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: ... } 就是 payloademit('add-to-cart', { id: props.id, price: props.price });};return { notifyParent };
},