improve warning when extra event listeners (fix #1001) #1005
Conversation
| `Extraneous non-emits event listeners (` + | ||
| `${eventAttrs.join(', ')}) ` + | ||
| `were passed to component but could not be automatically inherited ` + | ||
| `because component renders fragment or text root nodes.` |
There was a problem hiding this comment.
Let's add if the listener is intended to be a component custom event listener only, declare it using the "emits" option.
| result = normalizeVNode( | ||
| render.length > 1 | ||
| ? render(props, { | ||
| attrs, | ||
| get attrs() { |
There was a problem hiding this comment.
Should only make attrs a getter in dev.
There was a problem hiding this comment.
Changed. Is it okay, though, to use __DEV__ with a ternary to achieve that?
|
I'm not very experienced so, not sure if it helps, or if this is the correct place, but just in case... I came across this issue when googling the following warning:
After looking here and at some articles about Vue 3, I came to the conclusion that adding would be a good idea. That got rid of the warnings. A small point of confusion for me was why it still worked even without the emits property. Also, why this only happened when I added a grand-child component where the middle component just basically passed along the emitted event (no payload). I don't expect to receive explanations here. Just hoping to do my part and provide useful (hopefully) feedback. Please let me know if I should refrain or direct them elsewhere. Thanks again for the hard work on a great framework! |
|
Hello, I think this error message could be improved to also say something like "you may not have intended to have this listener fallthrough; consider |
This is meant to address #1001 by separating out onXXX attribute keys when fall-through can't be performed due to multiple root nodes. It warns that there are extra non-emits event listeners, indicating to the user that they should consider adding the events to the emits option.
This PR also adds logic to call
markAttrsAccessedwhen rendering functional components that have either optional props (so technically there are no extra attrs) or that accesscontext.attrssimilar to how stateful components work. This prevents the warning in those cases.