this.$emit(“update-quantity“, this.quantity)子组件的值传给父组件

<template>
  <div class="addSubtractButton">
    <input v-model="quantity" type="number">
    <div>
      <a class="add" href="javascript:;" @click="handleAdd">+</a>
      <a class="sub" @click="handleSubtract" :class="{disabled: quantity === 0, actived: quantity > 0}" href="javascript:;" >-</a>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        quantity: 0
      }
    },
    name:'AddSubtractButton',
    methods: {
      handleAdd(){
        this.quantity++;
        this.$emit("update-quantity", this.quantity);
      },
      handleSubtract(){
        this.quantity--;
        this.$emit("update-quantity", this.quantity);
      }
    }
  }
</script>
<style scoped>

.addSubtractButton input{
  height: 30px;
  width: 30px;
  float: left;
  text-align: center;
} 
.addSubtractButton div{
  width: 15px;
  height: 30px;
  float: left;
  margin: 0;
  padding: 0;
  
}
.addSubtractButton a{
  text-align: center;
  vertical-align: middle;
  height: 16px;
  width: 16px;
  background-color: #ccc;
  text-decoration: none;
  border: solid 1px gray;
  display: inline-block;
  margin: 0;
  padding: 0;
  outline: none;
} 

.addSubtractButton a.add{
  margin-top: -1px;
  color: black;
}

.addSubtractButton a.sub{
  margin-top: -3px;
  border-top: none;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
.disabled { 
  pointer-events: none; 
  color: gray; 
  cursor: default;
}
.actived{
  color: black;
}
</style>

父组件是，是Book.vue吗？

<template>
  <div class="book">
    <img :src="book.bigImgUrl" />
    <div>
      <div class="bookInfo">
        <h3>{{ book.title }}</h3>
        <p>{{ book.slogan }}</p>
        <p>
          <span>作者：{{ book.author }}</span>
          <span>出版社：{{ book.bookConcern }}</span>
          <span>出版日期：{{ book.publishDate }}</span>
        </p>
        <p>
          <span class="factPrice">
            {{ currency(factPrice(book.price,book.discount)) }}
          </span>
          <span class="discount">
            [{{ formatDiscount(book.discount) }}]
          </span>
          <span>[定价 <i class="price">{{ currency(book.price) }}</i>]</span>
        </p>
      </div>
      <div class="addCart">
        <AddSubtractButton :quantity="quantity" @updateQuantity="handleUpdate"/> 
        <button class="addCartButton" @click="addCart(book)">加入购物车</button>
      </div>
    </div>
    <BookTabComponent :content="book.detail"/>
  </div>
</template>

<script>
  import AddSubtractButton from '@/components/AddSubtractButton'
  import BookTabComponent from '@/components/BookTabComponent'
  import { mapActions } from 'vuex'
  export default {
    name: 'Book',
    data () {
      return {
        book: {},
        quantity: 0
      }
    },
    inject: ['factPrice', 'currency'],
    components: {
      AddSubtractButton,
      BookTabComponent
    },
  
    created(){
      this.axios.get(this.$route.fullPath)
        .then(response => {
          if(response.status == 200){
            this.book = response.data;
          }
        }).catch(error => alert(error));
    },
   
    methods: {
      // 子组件AddSubtractButton的自定义事件updateQuantity的处理函数
      handleUpdate(value){
        this.quantity = value;
      },
      addCart(book){
        let quantity = this.quantity;
        
        if(quantity === 0){
          quantity = 1;
        }
        let newItem = {...book, price: this.factPrice(book.price, book.discount)}; 
        this.addProductToCart({...newItem, quantity});
        this.$router.push('/cart');
      },
      ...mapActions('cart', [
        'addProductToCart'
      ]),
      // 格式化折扣数据
      formatDiscount(value){
        if(value){
          let strDigits = value.toString().substring(2);
          strDigits += "折";
          return strDigits;
        }
        else
          return value;
      }
    },
  }
</script>
<style scoped>
.book {
  width: 1100px;
  margin-top: 60px;
  text-align: left;
}
.book img {
  margin-left: 50px;
  float: left;
  width: 200px;
  height: 200px;
}
.book .bookInfo {
  margin-left: 20px;
  float: left;
  width: 800px;
  background-color: #eee;
  padding-left: 20px;
  padding-top: 5px;
}

.book .addCart {
  margin-left: 300px;
  float: left;
  margin-top: 10px;
}
.book .addCartButton{
	padding: 5px 10px 6px;
	color: #fff;
	border: none;
	border-bottom: solid 1px #222;
	border-radius: 5px;
	box-shadow: 0 1px 3px #999;
	text-shadow: 0 -1px 3px #444;
	cursor: pointer;
  background-color: #e33100;
  display: block;
  margin-left: 80px;
}
.addCartButton:hover {
  text-shadow: 0 1px 1px #444;
}

.book span{
  padding-right: 15px;
}

.book .price {
  color: gray;
  text-decoration: line-through;
}
.book .discount{
  color: red;
}
.book .factPrice{
  color: red;
  font-weight: bold;
}
</style>