svelte-eventbus
v0.2.0
Published
Simple eventbus realization based on internal Svelte's tools only.
Downloads
23
Readme
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>