跳至主要內容

正如我們在版面配置資料的簡介中所看到的,+page.svelte+layout.svelte 元件可以存取從其父層 load 函式返回的所有內容。

有時,讓 load 函式本身存取其父層的資料很有用。這可以使用 await parent() 來完成。

為了展示它是如何運作的,我們將把來自不同 load 函式的兩個數字相加。首先,從 src/routes/+layout.server.js 返回一些資料

src/routes/+layout.server.js
export function load() {
	return { a: 1 };
}

然後,在 src/routes/sum/+layout.js 中獲取該資料

src/routes/sum/+layout.js
export async function load({ parent }) {
	const { a } = await parent();
	return { b: a + 1 };
}

請注意,通用 load 函式可以從父層伺服器 load 函式獲取資料。反之則不然 — 伺服器載入函式只能從另一個伺服器載入函式獲取父層資料。

最後,在 src/routes/sum/+page.js 中,從兩個 load 函式獲取父層資料

src/routes/sum/+page.js
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>