如何在Sapper中将数据从布局传递到页面？ [英] How to pass data from a layout to a page in Sapper?

问题描述

在Svelte中可以传递props to the content in a slot。

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

当Sapper使用布局呈现路线时，路线内容也会呈现在一个槽中。问题是，由于Sapper控制了这一过程，似乎不可能将槽口道具传递给路线。

这不起作用：

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

那么，将数据从布局传递到呈现的路线的适当方式是什么呢？例如segment。

推荐答案

通过上下文向下传递。

这里需要注意的一件事是，当路线更改时，不会重新创建_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中将数据从布局传递到页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！