mirrors/svelte
mirrors/svelte
0
0
Fork 0
mirror of https://github.com/sveltejs/svelte.git synced 2024-11-22 03:47:27 +01:00
Code Issues Releases Wiki Activity

Tutorial : a better explanation of component events (#4639)

Browse Source 
* feat(tutorial): better explanation of component events

Co-Authored-By: Antony Jones <ant@enzy.org>
This commit is contained in:
Alexis Ménard 2021-02-04 11:10:34 +01:00 committed by GitHub
parent 8db3e8d029
commit ebbdb4277c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
site/content/tutorial/05-events/04-component-events/text.md
View File

@ -18,4 +18,10 @@ Components can also dispatch events. To do so, they must create an event dispatc
</script>
```
> `createEventDispatcher` must be called when the component is first instantiated — you can't do it later inside e.g. a `setTimeout` callback. This links `dispatch` to the component instance.
> `createEventDispatcher` must be called when the component is first instantiated — you can't do it later inside e.g. a `setTimeout` callback. This links `dispatch` to the component instance.
Notice that the `App` component is listening to the messages dispatched by `Inner` component thanks to the `on:message` directive. This directive is an attribute prefixed with `on:` followed by the event name that we are dispatching (in this case, `message`).
Without this attribute, messages would still be dispatched, but the App would not react to it. You can try removing the `on:message` attribute and pressing the button again.
> You can also try changing the event name to something else. For instance, change `dispatch('message')` to `dispatch('myevent')` in `Inner.svelte` and change the attribute name from `on:message` to `on:myevent` in the `App.svelte` component.