Как передать данные из макета на страницу в Sapper? - PullRequest
Новая
       9

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

0 голосов
/ 29 марта 2020

В Svelte вы можете передавать реквизиты для содержимого в слоте . 

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

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

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

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

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

1 Ответ

1 голос
/ 30 марта 2020

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

Здесь нужно помнить, что компонент _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>
...