子组件发出自定义事件，但未触发父组件的侦听器

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()！”不记录，#app 的方法 addAItem 没有被调用。

Answer 1

问题是自定义事件不应该用 camelCase 命名。如果您查看控制台中的错误消息，它会告诉您：

在组件中发出事件“itemadd”，但处理程序注册为“itemAdd”

即使您使用 camelCase 命名该组件，它也会发出小写版本。重命名为全小写或 kebab-case 将解决此问题。

在父模板中：

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

从子级发射：

this.$emit('itemadd');

这与 Evan You（Vue 创建者）here 进行了一些讨论