AddSubtractButton.vue书本里的加减数量组件，自定义的指令吗，为什么要用到$emit(“update-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>