正如我们在 布局数据 介绍中看到的,+page.svelte
和 +layout.svelte
组件可以访问其父级 load
函数返回的所有内容。
有时,load
函数本身需要访问其父级的数据。这可以通过 await parent()
来实现。
为了展示它是如何工作的,我们将把来自不同 load
函数的两个数字相加。首先,从 src/routes/+layout.server.js
返回一些数据:
src/routes/+layout.server
export function load() {
return { a: 1 };
}
然后,在 src/routes/sum/+layout.js
中获取该数据:
src/routes/sum/+layout
export async function load({ parent }) {
const { a } = await parent();
return { b: a + 1 };
}
注意,通用
load
函数可以从父级的 服务端load
函数获取数据。反过来则不行 — 服务端的 load 函数只能从另一个服务端的 load 函数获取父级数据。
最后,在 src/routes/sum/+page.js
中,从两个 load
函数获取父级数据:
src/routes/sum/+page
export async function load({ parent }) {
const { a, b } = await parent();
return { c: a + b };
}
使用
await parent()
时要注意不要引入瀑布流。如果你可以fetch
不依赖于父级数据的其他数据,那就先做这个。
上一页 下一页
1
2
3
<p>if a = 1 and b = a + 1, what is a + b?</p>
<a href="/sum">show answer</a>