英文:
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
<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
},
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:
<div @label:name="handleLabelName">
<div v-show="this.label === 'acme'">
<h3>Hello World</h3>
...
</div>
</div>
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 :
<child-component @my-event-name="handleLabelName"/>
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)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论