Vue：发出的事件未得到处理

Question

我能够起火emitgetcartitems，但是由于某种原因，另一个监听器emitaddnotes并未起火handleAddNotes()。我还通过检查this.$listeners来检查组件的上下文，并且只看到列出了emitgetcartitems。我不确定为什么其他事件根本不起作用。

刀片模板

<div id = "app"> 

    <Modal
      :modal-type="modalType"
      :selected-product="selectedProduct"
      :variant-data="variantData" 
      @emitgetcartitems="handleGetCartItems"
      @emitaddnotes="handleAddNotes"

    >
    </Modal>
    <Cart>
    </Cart>
</div>

app.js

window.Vue = require('vue');
window.axios = require('axios');

Vue.component('Modal', 
  require('./components/Modal.vue').default);


new Vue({
  el: "#app",
  data() {
    return {
      modalType: null,
      orderNotes: null,
      couponCode: null,
      selectedProduct: {},
      variantData: [],
      cart: {}
    }
  },
  methods: {
    handleChangeTab: function(tab) {
       this.activeTab = tab
    },
    handleHideFlashMsg: function() {
      this.flashStatus = false
    },
    handleAddNotes: function(){
      console.log("!!!!!!!")
    },
    handleGetCartItems: function() {
        axios
            .get('/api/a-cart')
            .then(response => {
                this.cart = response.cart;
            });
    },

  }
)}

Modal.vue

<template>
  <div>
    <button v-on:click="addNotes()"></button>
  </div>
</template>
<script>
  export default {
    data() {
          return {
          couponInput: '',
          }
    },
        props: {
          selectedProduct: {type: Object},
          orderNotes: {type: String},
          couponCode: {type: String}
        },
        methods: {
            getCartItems: function() {
                        console.log("GET CART")
                this.$emit('emitgetcartitems')
            },
            addNotes: function() {
                     console.log("ADD NOTES")
              this.$emit('emitaddnotes')
            },  
      }
  }

</script>