如何将数据从布局传递到 Sapper 中的页面？

Question

在 Svelte 中您可以通过 props to the content in a slot。

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

当Sapper 使用layout 渲染路由时，路由内容也会渲染在slot 中。问题是，由于 Sapper 控制了这个过程，所以似乎不可能将 slot prop 传递给路由。

这不起作用：

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

那么将数据从布局传递到渲染路线的合适方法是什么？例如 segment.

Answer 1

通过上下文传递下去。

这里要注意的一件事是，当路由更改时，不会重新创建 _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>

如何将数据从布局传递到 Sapper 中的页面？

How to pass data from a layout to a page in Sapper?

svelte

sapper