Vue3组合式API下计算子组件传回值求和实现方案问询

针对你的购物车总金额求和需求，完全不需要操作DOM，用Vue3的响应式数据就能优雅解决，以下是具体实现步骤：

1. 子组件修改：传递商品ID与对应总价 #

子组件当前仅传递总价，父组件无法区分是哪个商品的总价发生变化，因此需要将商品ID和总价一起传递：

<template>
  <div>
    <!-- 商品内容 -->
    <div class="count-manipulate">
      <div
        class="count-manipulate-item minus"
        @click.prevent="count <= 1 ? null : count--"
      ></div>
      <div class="count-manipulate-item plus" @click.prevent="count++"></div>
    </div>
    <!-- 移除按钮示例 -->
    <button @click="handleRemove">移除商品</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

let props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  type: {
    type: String,
  },
});

let emit = defineEmits(["remove", "sum"]);
let sum = ref(0);
let count = ref(1);

const calc = () => {
  sum.value = parseInt(count.value) * parseInt(props.item.attributes.Price);
  // 传递商品ID和总价的组合对象
  emit("sum", { id: props.item.id, total: sum.value });
};

// 移除商品时传递商品ID
const handleRemove = () => {
  emit("remove", props.item.id);
};

calc();

watch(count, () => {
  calc();
});
</script>

2. 父组件实现：维护商品总价映射并计算总金额 #

父组件需要维护每个商品的总价记录，再通过计算属性实时求和：

<template>
  <div class="cart-container">
    <BasketItem
      v-for="item in basketItems"
      :key="item.id"
      :item="item"
      :type="item.type"
      @remove="handleRemove"
      @sum="updateItemTotal"
    ></BasketItem>
    <!-- 展示订单总金额 -->
    <div class="total-price">订单总金额：{{ orderTotal }}</div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import BasketItem from './BasketItem.vue';

// 假设这是你的购物车商品列表
const basketItems = ref([/* 你的商品数据数组 */]);
// 存储每个商品的总价，key为商品ID，value为对应总价
const itemTotals = ref({});

// 更新单个商品的总价记录
const updateItemTotal = ({ id, total }) => {
  itemTotals.value[id] = total;
};

// 移除商品并同步删除对应总价记录
const handleRemove = (itemId) => {
  // 从购物车列表中移除商品（根据你的实际逻辑调整）
  basketItems.value = basketItems.value.filter(item => item.id !== itemId);
  // 删除对应商品的总价记录
  delete itemTotals.value[itemId];
};

// 实时计算订单总金额
const orderTotal = computed(() => {
  // 将所有商品总价累加，初始值为0
  return Object.values(itemTotals.value).reduce((acc, curr) => acc + curr, 0);
});
</script>

为什么不推荐用querySelectorAll？ #

直接操作DOM违背了Vue数据驱动的核心设计，会带来以下问题：

• 响应式失效：手动读取DOM数据无法触发Vue的视图更新，容易出现数据与视图不一致的情况
• 代码耦合度高：依赖DOM结构和属性，后续修改组件布局时极易出错
• 维护难度大：无法通过响应式数据直观追踪总价变化，排查问题更繁琐

内容的提问来源于stack exchange，提问作者Frallen