Saya tidak dapat menemukan cara untuk mengumpulkan variabel dari komponen yang ditampilkan dalam <slot> ke layout SvelteKit. Saya mencoba beberapa hal, seperti menggunakan bind: atau let: pada slot, tetapi tidak berhasil. Saya juga mencoba untuk mengexport atau tidak mengexport variabel pada layout, tapi saya tidak dapat membuatnya bekerja…
Saya memiliki struktur aplikasi seperti berikut:
__layout
├─ header (menu)
├─ my_page (<slot>)
└ my_component (many)
└ interactive banner
Dalam halaman my_page, saya ingin memperbarui variabel myvar yang ditampilkan dalam banner interaktif ketika pengguna klik pada elemen dalam komponen.
Penyelesaian
Saya menemukan bahwa slot SvelteKit Pages tidak sama dengan slot regular Svelte. Oleh karena itu, cara yang saya lakukan tidak bekerja. Jika Anda ingin membagikan data dinamis dari layout ke halaman anak, Anda dapat menggunakan API Konteks.
Contoh
Di dalam __layout.svelte:
<script>
import { setContext } from 'svelte';
import { writable } from 'svelte/store';
const myvar = writable('');
setContext('myvar-context', myvar);
</script>
<main>
<slot myvar={myvar}></slot>
<p>Layout myvar: {myvar}</p>
</main>
Di dalam mypage.svelte:
<script>
import { getContext } from 'svelte';
const myvar = getContext('myvar-context');
</script>
<main>
<h1>{$myvar}</h1>
<!-- ... -->
</main>
Penjelasan
Ketika Anda ingin membagikan data dari layout ke halaman anak, Anda dapat menggunakan API Konteks. Cara kerja adalah dengan cara membuat store di dalam layout dan kemudian mengaksesnya di dalam halaman anak melalui getContext. Dengan demikian, variabel tersebut akan berubah secara dinamis ketika nilai yang ditampilkan dalam layout berubah.
Sumber