Vue.js组件通信Emit实现购物车增减操作与总价实时刷新

文章不知道大家是否熟悉？今天我将给大家介绍《Vue.js组件通信Emit实现购物车增减操作与总价实时刷新》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

Vue.js父子组件通信通过$emit派发事件实现双向数据流，子组件触发'inc'/'dec'操作类型，父组件统一校验并更新quantity，总价用computed自动响应变化。

在 Vue.js 中，父子组件通信常用 $emit 触发自定义事件，配合 v-model 或 :value + @input（Vue 2）或 v-model:xxx（Vue 3）实现双向数据流。购物车中商品数量增减与总价实时更新，正是典型的父子协同场景：子组件（如 CartItem）负责操作按钮，父组件（如 CartList）维护商品列表和总价逻辑。

子组件：用 $emit 向上派发数量变更

子组件不直接修改传入的 quantity，而是通过事件通知父组件“我想加1”或“我想减1”。推荐传递操作类型（'inc' / 'dec'）而非新值，由父组件统一校验边界（如最小为1）。

示例（Vue 3 Composition API）：

<template>
  <div class="cart-item">
    <span>{{ item.name }}</span>
    <button @click="$emit('update:quantity', 'dec')">−</button>
    <span>{{ quantity }}</span>
    <button @click="$emit('update:quantity', 'inc')">+</button>
    <span>¥{{ (item.price * quantity).toFixed(2) }}</span>
  </div>
</template>
<p><script setup>
const props = defineProps({
item: { type: Object, required: true },
quantity: { type: Number, default: 1 }
})
const emit = defineEmits(['update:quantity'])
</script></p>

父组件：监听事件并更新状态，驱动总价重算

父组件用 v-model:quantity（Vue 3）或 :quantity.sync（Vue 2）语法糖简化绑定，内部实际等价于 :quantity="item.quantity" + @update:quantity 监听器。

关键点：

• 所有商品数据应存于响应式数组（如 ref([])），每项含 id、name、price、quantity
• 监听 update:quantity 时，根据 id 找到对应商品，安全更新 quantity（防止减至0以下）
• 总价用 computed 计算，自动响应任何 quantity 变化

总价计算：用 computed 保证响应式与性能

不要在每次 $emit 后手动调用函数求和，而是声明一个计算属性，它会自动追踪所有商品的 quantity 和 price 变化。

示例：

const cartItems = ref([
  { id: 1, name: 'iPhone', price: 5999, quantity: 2 },
  { id: 2, name: 'AirPods', price: 1299, quantity: 1 }
])
<p>const totalPrice = computed(() => {
return cartItems.value.reduce((sum, item) => {
return sum + item.price * item.quantity
}, 0)
})</p>

这样，只要任一商品的 quantity 被修改，totalPrice 就立即更新，模板中直接 {{ totalPrice.toFixed(2) }} 即可。

进阶建议：防抖提交、空状态处理、本地持久化

真实项目中可进一步优化：

• 数量变更后，用 debounce 延迟同步到后端或 localStorage，避免高频请求
• 父组件判断 cartItems.length === 0 渲染空购物车提示
• 初始化时从 localStorage 恢复购物车，更新后及时写入，保证页面刷新不丢失

核心逻辑清晰：子组件只发信号，父组件管状态与计算，$emit 是桥梁，computed 是自动更新引擎。不复杂但容易忽略。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~