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

Question

在 Svelte 你可以通过 props to the content in a slot .

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

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

这不起作用:

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

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

Answer 1

通过上下文传递它。

这里要注意的一件事是，当路由更改时，不会重新创建 _layout 组件。并且 Svelte 的上下文不是 react 性的。结论:您需要将数据包装在商店中。
_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>