VueJS 发出的事件没有被父组件接收

Question

我正在努力理解为什么父组件没有接收到子组件上发出的事件。

该事件是从子组件发出的 - 我可以在工具栏中看到它以及正确的值。未在父组件上调用与事件相关的方法。ChildComponent.vue是导入到ParentComponent.vue.

这是我所拥有的（有效但无效）。

父组件.vue

<child-component/>

<div v-show="this.label === 'acme'" @label:name="handleLabelName">
    <h3>Hello World</h3>
    ...
</div>

...

methods: {
    handleLabelName(name) {
        console.log('handleManualType called');  // never getting here
        console.log('name: ', name);             // never getting here
    }
},

子组件.vue

...

<button data-label="acme" @click="handleClick($event)">Click Me</button>

...

methods: {
    handleClick(event) {
    const label = event.target.dataset.label;
    this.$emit('label:name', label); // acme
},

本次活动是越来越广播，但handleLabelName从未得到调用。我已经多次阅读这篇很棒的文章，我相信我是正确地遵循它的。是不是我做错了什么让handleLabelName永远不会被调用？我也试过将所有内容都包装在一个 div 中，如下所示：

<div @label:name="handleLabelName">
    <div v-show="this.label === 'acme'">
        <h3>Hello World</h3>
        ...
    </div>
</div>

结果还是一样。handleLabelName永远不会被调用。我也试过将事件名称/方法更改为简单的东西，foo但仍然没有区别。

感谢您的任何建议！

Answer 1

您正在听 div 而不是听您的子组件。尝试这样的事情：

<child-component @my-event-name="handleLabelName"/>

您必须将侦听器放在当前发送事件的 DOM 元素上。

另一点是您可能更喜欢使用 kebab case 来命名您的自定义事件。用这个字符“:”命名你的事件可能有问题（参见https://vuejs.org/v2/guide/components-custom-events.html）