Components can also dispatch events. To do so, they must create an event dispatcher. Update Inner.svelte
:
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function sayHello() {
dispatch('message', {
text: 'Hello!'
});
}
</script>
createEventDispatcher
must be called when the component is first instantiated — you can't do it later inside e.g. asetTimeout
callback. This linksdispatch
to the component instance.
App.svelte
Inner.svelte
xxxxxxxxxx
9
1
<script>
2
import Inner from './Inner.svelte';
3
4
function handleMessage(event) {
5
alert(event.detail.text);
6
}
7
</script>
8
9
<Inner on:message={handleMessage}/>
Console
xxxxxxxxxx
57
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
create_component,
5
destroy_component,
6
init,
7
mount_component,
8
noop,
9
safe_not_equal,
10
transition_in,
11
transition_out
12
} from "svelte/internal";
13
14
import Inner from "./Inner.svelte";
15
16
function create_fragment(ctx) {
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
/* Add a <style> tag to see compiled CSS */