Passing Parent Method to Child in Svelte
It's possible to pass methods down to child components, but it's a little awkward. A more idiomatic approach is to fire an event from the child component and listen for that event from the parent component:
App.html
<div>
<TodoItem
{todo}
on:toggle="toggle(todo)"
/>
</div>
<script>
import TodoItem from './TodoItem.html';
export default {
components: {
TodoItem,
},
methods: {
toggle(todo) {
todo.done = !todo.done;
const { todos } = this.get();
this.set({ todos });
}
}
};
</script>
TodoItem.html
<div>
<button on:click="fire('toggle')">{todo.description}</button>
</div>
If you need to pass an event up through multiple levels of components you can just refire the event...
<TodoItem on:toggle="fire('toggle', event)">...</TodoItem>
...but there's a shorthand for doing so that means the same thing:
<TodoItem on:toggle>...</TodoItem>
Seems like "fire" was part of svelte v2 but in svelte v3 it's changed with createEventDispatcher
e.g -
child.svelte
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function sayHello() {
dispatch('message', {
text: 'Hello!'
});
}
</script>
<button on:click={sayHello}>
Click to say hello
</button>
parent.svelte
<script>
import Inner from './child.svelte';
function handleMessage(event) {
alert(event.detail.text);
}
</script>
<Inner on:message={handleMessage}/>
for more info - please visit : https://svelte.dev/tutorial/component-events