我正在处理一个 Sapper 项目,我想在加载到插槽之前将一些异步数据加载到布局中。我发现在 _layout.svelte 文件中,我无法将道具传递给插槽。
//_layout.svelte
<slot foo={"hello"}></slot>
//index.svelte
<script>
export let foo;
alert(foo); // returns undefined
</script>
Run Code Online (Sandbox Code Playgroud)
有没有人遇到过这个?我想我可以通过在每个插槽/子页面上加载我需要的所有数据来解决它。我能够设置插槽道具的唯一方法是手动访问它。
$$props.$$scope.ctx.level1.props.foo = "hello"
Run Code Online (Sandbox Code Playgroud) 在 Svelte 中,您可以将props传递给 slot 中的内容。
<Component let:message="Hello!">
<div>
{message}
</div>
</Component>
Run Code Online (Sandbox Code Playgroud)
当 Sapper 使用布局渲染路由时,路由内容也会渲染在一个槽中。问题是,由于 Sapper 控制了这个过程,似乎不可能将 slot prop 传递给路由。
这不起作用:
// _layout.svelte
<slot message="Hello!"></slot>
Run Code Online (Sandbox Code Playgroud)
那么将数据从布局传递到渲染路由的合适方法是什么?例如segment
。