在vue中使用$emit時,父元件無法監聽到子元件的事件如何實現？

下面我就為大家分享一篇vue使用$emit時,父元件無法監聽到子元件的事件實例，具有很好的參考價值，希望對大家有所幫助。

vue使用$emit時，父元件無法監聽到子元件的事件的原因是$emit傳入的事件名稱只能使用小寫，不能使用大寫的駝峰規則來命名

<p id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:ee="incrementTotal"></button-counter>
  <button-counter v-on:eEvent="incrementTotal"></button-counter>
  <child ref="cmpSelect" v-on:ee="incrementTotal" option-api-url="/api/admin/cms/cmsCategory/getOptions.do"></child>
 </p>
 <script>
  Vue.component(&#39;button-counter&#39;, {
   template: &#39;<button v-on:click="increment">{{ counter }}</button>&#39;,
   data: function () {
    return {
     counter: 0
    }
   },
   methods: {
    increment: function () {
     this.counter += 1
     this.$emit(&#39;ee&#39;, this.counter);//有效
     this.$emit(&#39;eEvent&#39;, this.counter);//无效，不能使用大写的驼峰规则命名
    }
   },
  })
  new Vue({
   el: &#39;#counter-event-example&#39;,
   data: {
    total: &#39;点击下面的按钮&#39;
   },
   methods: {
    incrementTotal: function (b) {
     this.total = b;
    }
   }
  })
 </script>

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

透過jQuery JSONP中跨域請求的方法（詳細教學）

在Vue中詳細解讀method與computed的區別（詳細教學）

透過在Vue2.0實現http請求以及loading展示

以上是在vue中使用$emit時,父元件無法監聽到子元件的事件如何實現？的詳細內容。更多資訊請關注PHP中文網其他相關文章！