Home > Web Front-end > JS Tutorial > When using $emit in vue, how can the parent component not listen to the events of the child component?

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

亚连
Release: 2018-06-04 14:17:57
Original
4111 people have browsed it

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template