VueJS 发出的事件未被父组件捕获。

huangapple go评论81阅读模式
英文:

VueJS emitted event not getting picked up by parent component

问题

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

事件确实从子组件中发出 - 我可以在工具栏中看到它以及正确的值。与事件关联的方法在父组件上没有被调用。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');  // 从未执行到这里
        console.log('name: ', name);             // 从未执行到这里
    }
},

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 从未被调用。我已经多次阅读了这篇很棒的文章,并且我相信我遵循了它的正确方法。我是否有什么做得不对,以致于 handleLabelName 从未被调用?我也尝试过将所有内容包装在一个 div 中,像这样:

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

但结果仍然相同。handleLabelName 从未被调用。我还尝试过将事件名称/方法更改为简单的名称,如 foo,但仍然没有任何变化。

感谢您的任何建议!

英文:

I am struggling to understand why an emitted event on a child component is not getting picked up by the parent.

The event is getting emitted from the child component - I can see it in the toolbar along with the correct values. The method that is tied to the event is not getting called on the parent component. ChildComponent.vue is a form that is imported into ParentComponent.vue.

Here is what I have (that's working but not).

ParentComponent.vue

&lt;child-component/&gt;

&lt;div v-show=&quot;this.label === &#39;acme&#39;&quot; @label:name=&quot;handleLabelName&quot;&gt;
    &lt;h3&gt;Hello World&lt;/h3&gt;
    ...
&lt;/div&gt;

...

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

ChildComponent.vue

...

&lt;button data-label=&quot;acme&quot; @click=&quot;handleClick($event)&quot;&gt;Click Me&lt;/button&gt;

...

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

The event is getting broadcast, but handleLabelName is never getting called. I've read through this great article many times and I believe I'm following it correctly. Is there something I am doing wrong to make handleLabelName never get called? I've also tried wrapping everything in a div like so:

&lt;div @label:name=&quot;handleLabelName&quot;&gt;
    &lt;div v-show=&quot;this.label === &#39;acme&#39;&quot;&gt;
        &lt;h3&gt;Hello World&lt;/h3&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;

And still the same result. handleLabelName never gets called. I've also tried changing the event name/method to simple things like, foo and still no difference.

Thank you for any suggestions!

答案1

得分: 6

你正在监听div上的事件,而不是监听你的子组件。你必须将监听器放在发送事件的DOM元素上。尝试像这样:

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

另一点是,你可能更喜欢使用短横线命名你的自定义事件。使用这个字符 ":" 来命名你的事件可能会有问题(参见 https://v2.vuejs.org/v2/guide/components-custom-events.html)。

英文:

You are listening for events on a div instead of listening to your child component. You must put your listener on the DOM element that sends the event. Try something like this :

&lt;child-component @my-event-name=&quot;handleLabelName&quot;/&gt;

Another point is that you might prefer using kebab case to name your custom events. It might be a problem to name your event with this character ":" (see https://v2.vuejs.org/v2/guide/components-custom-events.html)

huangapple
  • 本文由 发表于 2020年1月3日 22:18:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/59580133.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定