Lors de l'utilisation de $emit dans vue, comment le composant parent peut-il ne pas écouter les événements du composant enfant ?

Ci-dessous, je partagerai avec vous un article sur lorsque Vue utilise $emit, le composant parent ne peut pas surveiller l'instance d'événement du composant enfant. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Lorsque vue utilise $emit, la raison pour laquelle le composant parent ne peut pas surveiller les événements du composant enfant est que le nom de l'événement transmis par $emit ne peut être qu'en minuscules et ne peut pas être nommé en utilisant la règle des majuscules camel.

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Méthode de requête inter-domaines via jQuery+JSONP (tutoriel détaillé)

dans Vue détaillée interprétation de la différence entre méthode et calculé (tutoriel détaillé)

En implémentant la requête http et en chargeant l'affichage dans Vue2.0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!