建立於 2024-01-11 更新於 2026-09-02
# svelte
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>