mirror of https://github.com/sveltejs/svelte
35 lines
1.1 KiB
35 lines
1.1 KiB
---
|
|
title: Event forwarding
|
|
---
|
|
|
|
Unlike DOM events, component events don't _bubble_. If you want to listen to an event on some deeply nested component, the intermediate components must _forward_ the event.
|
|
|
|
In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](/tutorial/component-events), but there's now an `Outer.svelte` component that contains `<Inner/>`.
|
|
|
|
One way we could solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it:
|
|
|
|
```svelte
|
|
<script>
|
|
import Inner from './Inner.svelte';
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
function forward(event) {
|
|
dispatch('message', event.detail);
|
|
}
|
|
</script>
|
|
|
|
<Inner on:message={forward} />
|
|
```
|
|
|
|
But that's a lot of code to write, so Svelte gives us an equivalent shorthand — an `on:message` event directive without a value means 'forward all `message` events'.
|
|
|
|
```svelte
|
|
<script>
|
|
import Inner from './Inner.svelte';
|
|
</script>
|
|
|
|
<Inner on:message />
|
|
```
|