From ebbdb4277c184c481e3ea205f02a260b6a90a205 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexis=20M=C3=A9nard?= Date: Thu, 4 Feb 2021 11:10:34 +0100 Subject: [PATCH] Tutorial : a better explanation of component events (#4639) * feat(tutorial): better explanation of component events Co-Authored-By: Antony Jones --- .../tutorial/05-events/04-component-events/text.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/site/content/tutorial/05-events/04-component-events/text.md b/site/content/tutorial/05-events/04-component-events/text.md index 222a292b5f..ba3cd5b9c4 100644 --- a/site/content/tutorial/05-events/04-component-events/text.md +++ b/site/content/tutorial/05-events/04-component-events/text.md @@ -18,4 +18,10 @@ Components can also dispatch events. To do so, they must create an event dispatc ``` -> `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. \ No newline at end of file +> `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.