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

Question

在 Svelte 中，您可以将props传递给 slot 中的内容。

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

当 Sapper 使用布局渲染路由时，路由内容也会渲染在一个槽中。问题是，由于 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>