0Pricing
Sveltejs Academy · 课时

返回数据并使用 $page.data

从 load 返回数据，并通过 data 属性在页面组件中访问这些数据。

返回数据并使用 $page.data 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。

data 属性

页面会接收一个特殊的 data 属性，其内容来自加载函数的返回值。

<!-- +page.svelte -->
<script>
  export let data;
</script>
<ul>{#each data.items as it}<li>{it.name}</li>{/each}</ul>

类型安全

使用 TypeScript 时，SvelteKit 会根据加载函数自动为 data 生成类型。

<script lang="ts">
  import type { PageData } from "./$types";
  export let data: PageData;
</script>

多个属性

返回多个键；通过 data.key 访问每个键。

响应性

导航时，data 属性会进行响应式更新。绑定内容也会重新渲染。

页面存储

通过 $app/stores 中的 $page，可以在任意位置访问元数据。

import { page } from "$app/stores";
<p>Current path: {$page.url.pathname}</p>

合并布局数据

布局加载函数和页面加载函数会合并为一个数据对象，在整个页面树中都可以访问。

自定义属性

您可以传递任何可序列化的值：数组、对象、基本类型，甚至用于流式传输的 Promise。

避免使用函数

函数无法序列化；请只返回数据，不要返回行为。

默认值

如果加载函数没有返回内容，data 就是 {}。

与存储组合

您可以在挂载时根据加载数据填充存储，以便全局访问。

页面错误

如果加载函数抛出错误，就会显示最近的 +error.svelte。不会设置 data。

快速检查

如何在组件中访问加载函数的返回值？

回顾

通过 data 属性接收加载数据。使用 $page 获取 URL、参数和路由信息。

常见问题解答

「返回数据并使用 $page.data」课时是免费的吗？

是的 — 「返回数据并使用 $page.data」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。

「返回数据并使用 $page.data」这节课中我会学到什么？

从 load 返回数据，并通过 data 属性在页面组件中访问这些数据。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Sveltejs Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「返回数据并使用 $page.data」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Sveltejs Academy 课中编写并运行代码吗？

能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. +page.js 的 load 函数
  2. 返回数据并使用 $page.data
  3. load 中的错误处理
  4. 用于仅服务器逻辑的 +page.server.js
← 返回 Sveltejs Academy