дочерний компонент генерирует пользовательское событие, но слушатель родительского компонента не срабатывает

Question

Я зарегистрировал дочерний компонент в Vue, дочерний компонент отправит пользовательское событие, но прослушиватель родительского компонента не сработал.

<template id="add-item-template">
<div class="input-group">
  <input @keyup.enter="addItem" v-model="newItem" >
  <span class="input-group-btn">
    <button @click="addItem" type="button">Add!</button>
  </span>
</div>
</template>

<div id="app" class="container">
  <h2>{{ title }}</h2>
  <add-item-component v-on:itemAdd="addAItem"></add-item-component>
</div>

Vue.component('add-item-component', {
  template: '#add-item-template',
  data: function () {
    return {
        newItem: ''
    };
  },
  methods: {
    addItem() {
      this.$emit('itemAdd');
      console.log("itemAdd In add-item-component");
    }
  }
});

new Vue({
  el: '#app',
  data: { 
    title: 'Welcome to Vue' 
  },
  methods: {
    addAItem: function () {
      console.log("In #app, addAItem()!");
    }
  }
});

Показать журнал "itemAdd In add-item-component"в консоли, но "В #app, addAItem ()!"не регистрируйтесь, метод # приложения addAItem не вызывается.

Answer 1

Проблема в том, что пользовательские события не должны именоваться с помощью camelCase.Если вы посмотрите на сообщение об ошибке в консоли, оно сообщит вам:

Событие "itemadd" отправлено в компоненте, но обработчик зарегистрирован для "itemAdd"

Компонент испускает строчную версию, даже если вы использовали camelCase, чтобы назвать ее.Переименование всех строчных или кебаб-регистров исправит это.

В родительском шаблоне:

<add-item-component @itemadd="addAItem">

Излучение от ребенка:

this.$emit('itemadd');

Это обсуждаетсянемного с Эван Ю (создатель Vue) здесь