Context API

setContext and getContext

Context API 為元件提供了一種相互「對話」的機制,無需將資料和函數作為 props 傳遞,也無需調度大量事件。

<!-- ComponentA.svelte -->
<script>
    import { setContext } from "svelte";

    setContext("componentA", {
        sayHello,
    });

    function sayHello() {
        alert("hello!");
    }
</script>
<!-- ComponentB.svelte -->
<script>
    import { getContext } from "svelte";

    function useAnotherComponentSayHello() {
        getContext("componentA").sayHello();
    }
</script>

<button on:click={useAnotherComponentSayHello}> Say hello </button>