Vue.js 如何计算Vuejs中三个组件的总计？

因此，让我解释一下我想要实现的目标，我有一个名为

RoomDetails

的组件，它的子组件名为

SelectRoomDetails

（在图片中，它的高级房间、豪华房间放置了3个子组件）。在选择房间时，将计算

价格

，在选择税费时，将计算价格，如图所示

选择房间

SelectRoomDetails

将

发出一个名为
total price
的事件，我正在传递
price
和
tax
。我在
RoomDetails
中捕捉到了
total price
事件，但问题是我无法计算出如何计算
Sum
，
price
在这种情况下来自三个子组件

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

选择RoomDetails.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);   
          }

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

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

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

RoomDetails.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);   
          }

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

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

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

此处显示总和

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);   
          }

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

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

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

Sum:{{this.totalPrice}

解决这个问题的一种方法是让每个房间发出一个事件，并在房间id（或其他一些唯一的值）上注明价格和标签



并将其存储在
数据
中，使用一个
计算出的
值对价格进行求和


导出默认值{
数据（）{
返回{
客房价格：{}
}
},
方法：{
OnRoomPrice更新（roomId，price）{
这个.roomPrices[roomId]=价格；
}
},
计算：{
总价{
返回Object.values（this.roomPrices）
.reduce（（roomPrice，totalPrice）=>roomPrice+totalPrice，0）；
}
}
}

现在，组件内的总和应为
this.totalPrice
。
如果您问“如何从子组件获取数据”，答案通常是数据的所有权应上移到父级，只读值应向下传递到子级。父对象是数据的真实来源，而子对象在想要更改数据时会发出事件。在这种情况下，每次价格发生变化时，子对象都会发出
事件，但我不知道如何添加。例如，当我在
superior room
component
this.totalPrice=999中选择房间时
但是当我再次在
豪华房
组件
中选择房间时，totalPrice=0
因此
和
变为0。