Question

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

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

当Sapper使用布局渲染路线时，路线内容也会在插槽中渲染。问题在于，由于Sapper控制了该过程，因此似乎无法将slot属性传递给路线。

这不起作用：

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

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

Answer 1

通过上下文传递它。

这里要注意的一件事是，更改路线时不会重新创建_layout组件。斯维尔特的语境不是被动的。结论：您需要将数据包装在商店中。

_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中将数据从布局传递到页面？

1 个答案: