Question

我正在努力理解为什么子组件上的发射事件没有被父组件拾取。

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

这就是我所拥有的（正在运行，但是没有）。

ParentComponent.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
    }
},

ChildComponent.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从未被调用。我已经通读this great article很多次了，我相信我已经正确地遵循了。使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）

VueJS发出的事件未被父组件拾取

1 个答案: