Как изменить родительское значение с использованием дочернего значения VUE JS?

Question

[khalel2]

Я знаю как передать данные, просто никак не могу додумать как корректно вычитать данные в родительском компоненте. Попробуйте у себя прокрутить мой код вы поймете.

Parent Component

<template>
  <div class="section__wrapper">
      <h1>{{ this.total }}</h1>
      <vItem title="Big Mac" price=2 @clicked="onClickChild"></vItem>
      <vItem title="Flip Flops" price=3  @clicked="onClickChild"></vItem>
  </div>
</template> 

<script>
import vItem from './v-item.vue';
export default {
   data(){
      return{
         total:1000000,
      }
   },
   components: {
      Child
  },
  methods:{
   onClickChild(value){
      this.total -= value
   },
  },
  mounted(){

  }
}
</script>

Child Component

<!--Child component-->
<template>
  <div class="item__body">
   <div class="item__body__content">
      <img src="" alt="" class="item__body__content__img">
      <p>{{ this.totalOfItem }}</p>
      <p>{{ this.total }}</p>
      <p class="item__body__content__title">{{ this.title }}</p>
      <p class="item__body__content__price">${{ this.price }}</p>
      <div class="item__body__content__control">
         <button class="item__body__content__btn sell" @click="increasePrice">sell</button>
         <input type="text" class="item__body__content__input" :value=this.count>
         <button class="item__body__content__btn buy" @click="decreasePrice">buy</button>
      </div>
   </div>
  </div>
</template>

<script>

export default {
   inherit: true,
   props: {
    title: String,
    price: Number,
  },
  data(){
   return{
   count:0,
   totalOfItem: 0
   }
   },
   methods:{
      increasePrice(){
      this.count -= 1
      this.totalOfItem = this.count * this.price
      this.$emit('clicked', this.totalOfItem)
      },
      decreasePrice(){
      this.count += 1
      this.totalOfItem = this.count * this.price
      this.$emit('clicked', this.totalOfItem)
      },
   }
}
</script>

Answer 1

[0xD34F]

data: () => ({
  count: 0,
}),
computed: {
  totalOfItem() {
    return this.count * this.price;
  },
},
watch: {
  totalOfItem(val, oldVal) {
    this.$emit('clicked', val - oldVal);
  },
},

<button @click="count--">sell</button>
<button @click="count++">buy</button>