svelte-eventbus
Simple eventbus realization based on internal Svelte's tools only.
Use when you need handle events from deeply-nested child components without events forwarding.
Features
-
You can set event listeners on
Eventbus
component and catch any event created withcreateEventbusDispatcher
in any child component. -
Events are isolated inside of
Eventbus
component instance. You can have more than oneEventbus
in the parent component. Each will listen events from it's child components only. -
If you have several nested
Eventbus
components, events will bubble through them while needed event listener will be occurred.
Usage example:
Parent - App.svelte
<script>
import {Eventbus} from 'svelte-eventbus';
import Child from './Child.svelte';
let totalclicks = 0;
</script>
<p>Total clicks: {totalclicks}</p>
<Eventbus on:button_click={()=>totalclicks++}>
<!-- There can be childs in any nest level-->
<Child />
</Eventbus>
Nested - Child.svelte
<script>
import {createEventbusDispatcher} from 'svelte-eventbus';
const dispatch = createEventbusDispatcher();
</script>
<button on:click={()=>dispatch('button_click')}>Click</button>