Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

正如我们在 布局数据 介绍中看到的,+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 不依赖于父级数据的其他数据,那就先做这个。

在 GitHub 编辑此页面

1
2
3
<p>if a = 1 and b = a + 1, what is a + b?</p>
<a href="/sum">show answer</a>