Как передать данные из макета на страницу в Sapper?

В Svelte вы можете передавать свойства содержимому в слоте.

<Component let:message="Hello!">
    <div>
        {message}
    </div>
</Component>

Когда Sapper использует макет для визуализации маршрута, содержимое маршрута также отображается в слоте. Проблема в том, что, поскольку Sapper берет на себя управление этим процессом, кажется невозможным передать свойство слота в маршрут.

Это не работает:

// _layout.svelte
<slot message="Hello!"></slot>

Итак, каков наиболее подходящий способ передачи данных из макета в визуализированный маршрут? Например segment.


svelte sapper
person Pier    schedule 29.03.2020    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Передайте это через контекст.

Здесь следует помнить, что компонент _layout не будет воссоздан при изменении маршрута. И контекст Svelte не является реактивным. Вывод: вам нужно обернуть свои данные в магазине.

_layout.svelte

<script>
  import { setContext } from 'svelte'
  import { writable } from 'svelte/store'

  export let segment;

  const segment$ = writable(segment)

  // this updates the store's value when `segment` changes
  // syntactic sugar for: segment$.set(segment)
  $: $segment$ = segment

  setContext('segment', segment$)
</script>

<slot />

На некоторой дочерней странице этого макета:

<script>
  import { getContext } from 'svelte'

  const segment$ = getContext('segment')

  $: segment = $segment$

  $: console.log(segment)
</script>
person rixo    schedule 29.03.2020