When using $emit in vue, how can the parent component not listen to the events of the child component?

Below I will share with you an article that when Vue uses $emit, the parent component cannot monitor the event instance of the child component. It has a good reference value and I hope it will be helpful to everyone.

When vue uses $emit, the reason why the parent component cannot monitor the events of the child component is that the event name passed in by $emit can only be lowercase and cannot be named using uppercase camel case rules

<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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Method of cross-domain request through jQuery JSONP (detailed tutorial)

Detailed in Vue Interpret the difference between method and computed (detailed tutorial)

#By implementing http request and loading display in Vue2.0

The above is the detailed content of When using $emit in vue, how can the parent component not listen to the events of the child component?. For more information, please follow other related articles on the PHP Chinese website!