Vue:用户在下级组件中增加物料时如何更新购物车总价

<template>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [], // 购物车物料列表
      totalPrice: 0, // 购物车总价
    };
  },
  methods: {
    updateCart(item) {
      this.cartItems.push(item); // 将物料添加到购物车物料列表
      this.totalPrice += item.price; // 更新购物车总价
    },
  },
};
</script>

<template>
  <div>
    <h3>物料列表</h3>
    <ul>
      <li v-for="item in materials" :key="item.id">
        {{ item.name }} - {{ item.price }}
        <button @click="addToCart(item)">添加到购物车</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      materials: [
        { id: 1, name: '物料1', price: 10 },
        { id: 2, name: '物料2', price: 20 },
        { id: 3, name: '物料3', price: 30 },
      ],
    };
  },
  methods: {
    addToCart(item) {
      this.$emit('add-to-cart', item); // 触发事件，将物料信息传递给父级组件
    },
  },
};
</script>

<template>
  <div>
    <cart-component @add-to-cart="updateCart"></cart-component>
    <materials-component></materials-component>
  </div>
</template>

<script>
import CartComponent from './CartComponent.vue';
import MaterialsComponent from './MaterialsComponent.vue';

export default {
  components: {
    CartComponent,
    MaterialsComponent,
  },
  methods: {
    updateCart(item) {
      this.$refs.cart.updateCart(item); // 调用购物车组件的方法，更新购物车
    },
  },
};
</script>