How to deal with events in nested components ?

[nhaberl]

Hi, what is the prefered way of listening to events of a component within a component ?
Currently I always fire the event and listen on root, try to find the component which is actually interested in and push data to the interface.

But actually I would like to fire the event only to the "Hosting " component ... like a component with any button click within a global component.

Do not wanna mess up root instance ...
Any suggestions welcome!

[evs-chris]

Are we talking sibling components interested in what each other are firing? If it's parents/children/[great*-]grandchildren, the official preferred method would be to proxy the child events e.g. <outer on-foo=bar><inner on-baz=foo><final><button on-click="baz" /></final></inner></outer>.

I have a handful of components that I just want to grab something like the selected event from and do something with the selected item. In that case, I'll have a plain old namespaced listener in the parent e.g. on: { 'table.selected'(ctx, item) { console.log(item, 'selected') } }.

I have used a detached ractive instance as an event bus before, but it really depends on the situation how you would hook that up. You can expose the bus in the data or import it and use method listeners to call it in the instance code. So something like globalThis.someBus = new Ractive(). Then in the listening instances, hook/un-hook listeners in init and teardown e.g. this.on('init', someBus.on('interestingEvent', () => console.log('interesting?')), and in the firing components, this.bus = someBus and <button on-click="@.bus.fire("interestingEvent")">Do a thing</button>.

Again, it really depends on the situation, but some combination of those usually has me covered.

I've also used the same global instance pattern for shared data, where data is mostly stored in a detached global instance and linked into whatever components need it. That often lets me skirt the need for additional events by sharing observers.

[nhaberl]

Thanks Chris, I have mostly the need for parent child relationships or just listening for any selected event in the parent.

So how can I fire the event which I can listen to in a parent ?... can any component or instance listen to that event ?
So does the event propagate globally ?

So your second approach ... what would the event triggering part look like ?
This.root.fire I guess ir is not right.

[evs-chris]

Ractive events bubble up the component hierarchy to their root, so not really globally. When the event bubbles across its origin component boundary, it gets namespaced with that component name. So <foo><button on-click="bar">click me</button></foo> will fire the bar event within the foo component, but that same bar event, assuming it's not cancelled, will bubble into the component containing foo as foo.bar. Any component that's up the hierarchy from foo can listen for foo.bar events.