如何计算 Vuejs 中三个组件的总数？答案

【问题标题】：How to calculate total from three components in Vuejs?如何计算 Vuejs 中三个组件的总数？
【发布时间】：2020-04-16 12:02:12
【问题描述】：

所以，让我向我解释一下我想要实现的目标，我有一个名为 RoomDetails 的组件，它有一个名为 SelectRoomDetails 的子组件（在图片中它的高级房、豪华房、放置 3 个子组件）。选房时会计算price，选房时会计算如图所示。

在选择房间SelectRoomDetails 时，emit 将发生一个名为total-price 的事件，我将在其中经过price 和tax。我在RoomDetails 中捕获了total-price 事件，但问题是我无法弄清楚如何计算Sum 和price 在这种情况下来自三个子组件。

我的问题是如何编写calculateTotalPrice 方法，以便它在选择房间时计算Sum，并在取消选择房间时减去它。提前致谢！

SelectRoomDetails.vue

totalPrice(base_price) {
      if(this.selected.length > 0) {
           let price = base_price*this.selected.length;
            let startDate = moment(this.guestCheckIn, "DD.MM.YYYY");
            let endDate = moment(this.guestCheckOut, "DD.MM.YYYY");

            let result = endDate.diff(startDate, 'days');
            let days = parseInt(result);
            this.roomtype_net_price = price*days;     
            let tax = this.taxes.find(taxes => taxes.id == this.selectedTax);     
            if(tax)
            {
                let newPrice = this.getTax(tax, this.roomtype_net_price);
                console.log(newPrice);
                this.taxPrice = newPrice;
            }
            else
            {
              this.taxPrice = 0;
            }
           }
          else
          {
            this.roomtype_net_price = 0
          }
            this.$emit("total-price", this.roomtype_net_price, this.taxPrice);      
          },
            changePrice(price) {
            this.roomType.base_price = price
            this.totalPrice(price);   
          }

RoomDetails.vue

<tr v-for="roomType in roomTypes" :key="roomType.id">
        <select-room-details
          :room-type="roomType"
          :taxes="taxes"
          :guest-check-in="guestCheckIn"
          :guest-check-out="guestCheckOut"
          v-on:select-room="selectRoom"
          v-on:total-price="calculateTotalPrice"
        ></select-room-details>
      </tr>

RoomDetails.vue 中的方法

 calculateTotalPrice(total, tax) {
      this.totalPrice = 0;
      this.totalTax = tax;
      this.totalPrice = this.totalPrice + total + tax;
    }
  }

此处显示总和

  <td class="display-2">Sum: {{this.totalPrice}}</td>

【问题讨论】：

如果你问“我如何从子组件获取数据”这个问题，答案通常是数据的所有权应该上移到父组件并且应该传递只读值下到孩子。父节点是数据的真实来源，子节点在想要对数据进行更改时发出事件。
在这里，在这种情况下，每次价格发生变化时，孩子都会发出event，但我不知道如何添加。例如，当我在superior room 组件this.totalPrice = 999; 中选择房间时，但当我再次在Deluxe Room 组件this.totalPrice = 0; 中选择房间时，Sum 变为0。

标签： vue.js

【解决方案1】：

解决此问题的一种方法是让每个房间发出一个带有其价格的事件并附加房间 ID（或其他一些唯一值）

<tr 
    v-for="roomType in roomTypes"
    :key="roomType.id"
>
    <select-room-details
      v-on:total-price="roomPriceUpdated(roomType.id, $event)"
    />
</tr>

并将其存储在 data 中，并带有一个对价格求和的 computed 值。

<script>
export default {
  data() {
    return {
      roomPrices: {}
    }
  },
  methods: {
    onRoomPriceUpdated(roomId, price) {
        this.roomPrices[roomId] = price;
    }
  },
  computed: {
    totalPrice() {
        return Object.values(this.roomPrices)
            .reduce((roomPrice, totalPrice) => roomPrice + totalPrice, 0);
    }
  }
}
</script>

现在应该可以在组件中以this.totalPrice 的形式使用总和。

【讨论】：