正如我們在版面配置資料的簡介中所看到的,+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
其他不依賴父層資料的資料,請先執行該操作。
1
2
3
<p>if a = 1 and b = a + 1, what is a + b?</p>
<a href="/sum">show answer</a>