此页面概述了 Svelte 组件可用的核心功能。它解释了组件如何与用户交互、管理数据以及与其他组件集成所需的基本功能和 API 模式。有关属性和绑定的具体详情，请参阅 属性和绑定，有关事件处理，请参阅 事件和事件处理，有关动画功能，请参阅 过渡和动画。
Svelte 组件是 Svelte 应用程序的构建块。每个组件都将标记、样式和行为封装在单个文件中。在 Svelte 5 中，组件是接受 props 并返回包含导出和可能的生命周期方法的结构化对象的 JavaScript 函数。
来源
在 Svelte 5 中，组件是函数，而不是类（如 Svelte 4 中）。这两种模型之间的过渡在类型系统中有所体现。
来源
在 Svelte 5 中，组件使用 mount 或 hydrate 函数进行实例化。
mount 函数将组件附加到 DOM，而 hydrate 在服务器端渲染场景中重用现有的 DOM 节点。unmount 函数则会从 DOM 中移除组件。
来源
Svelte 提供了 TypeScript 接口，使得组件可以进行强类型定义。
此类型定义允许在将 props 传递给组件和使用它们提供的导出时实现类型安全。
来源
组件通过 props 接收输入数据，并通过状态维护内部数据。
Props 是从父组件传递到子组件的值。
来源
Svelte 5 引入了“runes”来管理状态。
来源
Svelte 组件支持多种增强其功能的指令。
来源
bind: 指令在 DOM 元素属性和组件变量之间创建双向数据绑定。
来源
Svelte 中的事件处理使用 `on:` 指令。
可以使用 `preventDefault`、`stopPropagation` 和 `once` 等事件修饰符。
来源
use: 指令将 actions（JavaScript 函数）应用于 DOM 元素。
Actions 可以带有参数，并返回一个包含 `update` 和 `destroy` 方法的对象。
来源
style: 和 `class:` 指令允许进行动态样式设置。
这些指令提供了一种方便的方式来应用条件样式和类。
来源
Svelte 提供了将父组件的内容投射到子组件的机制。
Slots 允许组件接受并渲染其父组件的内容。
来源
Svelte 5 引入了 snippets，作为 slots 的更灵活替代方案。
Snippet 可以接受参数，并可以使用 {@render ...} 标签进行条件渲染。
来源
Svelte 提供了可以为组件添加功能的特殊元素。
来源
特殊元素提供了各种能力
<svelte:component this={component}> - 动态渲染组件<svelte:element this={tag}> - 动态渲染 HTML 元素<svelte:self> - 递归渲染当前组件<svelte:window on:resize={handleResize}/> - 为 window 添加事件监听器<svelte:head> - 将内容放在 document 的 head 中来源
Svelte 组件具有生命周期方法，允许在特定时间运行代码。
来源
关键的生命周期钩子有
onMount(callback) - 组件首次渲染到 DOM 后运行onDestroy(callback) - 组件卸载时运行$effect(callback) - 当响应式依赖项更改时运行$effect.pre(callback) - 在状态更改应用于 DOM 之前运行来源
Svelte 提供了上下文 API，用于在组件之间共享数据，无需使用 props。
上下文 API 包括
setContext(key, context) - 设置上下文值getContext(key) - 获取上下文值hasContext(key) - 检查上下文是否存在getAllContexts() - 获取所有上下文值来源
Svelte 可以将组件编译为自定义元素（Web Components）。
可以使用 customElement 编译器选项将组件编译为自定义元素。
来源
自定义元素随后可在 HTML 或其他框架中使用
来源
Svelte 在模板中为控制流提供了特殊的块语法。
来源
这些块在模板中提供控制流
{#if ...} - 条件渲染{#each ...} - 列表渲染{#await ...} - 异步数据处理{#key ...} - 当 key 更改时强制重新创建元素{#snippet ...} - 定义可重用的模板片段来源
Svelte 组件提供了一系列丰富的特性，用于构建交互式 Web 应用程序。
这些特性与 Svelte 的响应式系统紧密集成，提供了强大且符合人体工程学的 UI 构建方式。
来源