Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

$emit poorly documented / breaks platform patterns #9868

Closed
ktiedt opened this Issue Apr 12, 2019 · 6 comments

Comments

Projects
None yet
3 participants
@ktiedt
Copy link

ktiedt commented Apr 12, 2019

Version

2.6.10

Reproduction link

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#Event_bubbling

It is largely a documentation issue / missing feature, so linking to the relevant JS Event spec on MDN.

Steps to reproduce

Call $emit('my-event') on a component while listening for it on a grandparent component.

What is expected?

I expect to be able to fire an event that is able to say "this event should bubble until stopped" and likewise, fire an event that is not cancellable as per the JS specs.

What is actually happening?

There is no way to do this in Vue presently.


It has come to my attention that $emit does not allow for, nor does it, bubble events... At the very least, this deviation from the platform event spec should be clearly documented, as nobody working in JS ever expects they should have to implement bubbling manually when working with Javascript events (which $emit is alludes to being syntactic sugar for by claiming they are Custom Events . Ideally, $emit would be expanded to allow for bubbling to be manually controlled by the developer (As JS intends them to be done) by accepting something akin to the customEventInit object, this would include the added benefit of enabling ALL JS event specific features in the $emit method...

@posva

This comment has been minimized.

Copy link
Member

posva commented Apr 12, 2019

Yes, events do not bubble, this is by design. You can find more information about it in closed issues 🙂
Regarding docs, you can propose improvements in our docs repo vuejs.org, they are welcome!

@posva posva closed this Apr 12, 2019

@ktiedt

This comment has been minimized.

Copy link
Author

ktiedt commented Apr 12, 2019

Can you explain the design choice because it's never been explained in any of the closed tickets? Infact the handling of this broken standard has been nothing more than "we know" or "by design" how is anyone supposed to suggest an improvement when the people who know the reasoning never elaborate on that reasoning?

@posva

This comment has been minimized.

Copy link
Member

posva commented Apr 12, 2019

#2873 check the deprecation of broadcast/emit

@ktiedt

This comment has been minimized.

Copy link
Author

ktiedt commented Apr 12, 2019

It doesn't explain anything about $emit and custom events not being similar or dissimilar from actual custom events... A bubbling event is not a global broadcast...

@yyx990803

This comment has been minimized.

Copy link
Member

yyx990803 commented Apr 14, 2019

The docs never said custom events behave like native events. They are modeled after Node.js' EventEmitter. The docs never claimed custom events are anything similar to native DOM events, in fact, it explicitly warns you that they are different concepts.

The deprecated option was $dispatch, which indeed bubbles, but it was removed in 2.0. In our experience bubbling events between components easily lead to code that is hard to understand because the event bubbling flow is very implicit.

@ktiedt

This comment has been minimized.

Copy link
Author

ktiedt commented Apr 14, 2019

@yyx990803 That is certainly more useful information, considering the docs call the feature Custom Events (which is the name in EcmaScript) it would be very useful to document this information and reference EventEmitters...

As Custom Events in Javascript are optionally able to bubble (by default they do not) so even if Vue opted to wrap the Native event system (Which makes a ton of sense for a predominantly client-side framework) by adding the EventInit object param, it would not change the default behavior in Vue and it would keep it consistent with the platform which is it built on top of.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.