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创作者）Preparing an Android app for release

进行了一些讨论。

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

1 个答案: