组件

基础组件

Hello {name}!

组件结构

<script>	组件逻辑（JS/TS）
Markup	含 `{表达式}` 的 HTML 模板
<style>	作用域 CSS（自动限定到组件）
<script context="module">	每个模块只运行一次，不随实例重复

响应式

响应式赋值

响应式声明

$: 标记响应式声明和语句

响应式规则

Assignment triggers	`count += 1` 触发更新；`obj.x = 1` 也会触发
Array mutation	使用 `arr = [...arr, item]`（重新赋值以触发更新）
$: declaration	引用变量变化时自动重新计算
$: statement	响应式地执行副作用

Props

声明与传递 Props

{greeting}, {name}!

展开 Props

事件

DOM 事件

value = e.target.value} />

事件修饰符

preventDefault	调用 `e.preventDefault()`
stopPropagation	阻止事件冒泡
once	处理器只触发一次
self	仅当 `event.target` 为该元素时触发
capture	使用捕获阶段

组件事件

绑定

双向绑定

元素与组件绑定

绑定类型

bind:value	input/select/textarea 值
bind:checked	复选框状态
bind:group	单选/复选框组
bind:this	DOM 元素引用
bind:clientWidth/Height	只读元素尺寸

Store

可写 Store

// store.js import { writable } from "svelte/store"; export const count = writable(0); // Component — auto-subscribe with $

Store 方法

count.set(10);               // set value
count.update(n => n + 1);    // update from current
const unsub = count.subscribe(v => console.log(v));

Store 类型

writable(val)	可读写 Store
readable(val, fn)	只读，由 start 函数设置
derived(stores, fn)	从其他 Store 派生计算
$store	组件中的自动订阅语法

过渡动画

内置过渡

{#if visible}Fades in/out
Fly in, fade out

{/if}

过渡选项

fade	透明度 0 到 1
fly	x/y 偏移 + 透明度动画
slide	滑入/滑出（高度）
scale	缩放并淡入淡出
draw	SVG 路径描边动画
duration	过渡时长（毫秒）
delay	开始前的延迟

插槽

默认与具名插槽

Default header Default content

Title

Body content goes here

插槽 Props

{#each items as item} {/each}

{index}: {item.name}

Context

设置与获取 Context

Context vs Store

Context	限定于组件树作用域，默认不响应式
Stores	全局、响应式，可在任何地方导入
Context + Store	通过 Context 传递 Store，实现作用域响应式

SvelteKit 基础

基于文件的路由

src/routes/
  +page.svelte          
  about/+page.svelte    
  blog/[slug]/+page.svelte  

Load 函数

// +page.js (runs on client & server)
export async function load({ params, fetch }) {
  const res = await fetch(`/api/posts/${params.slug}`);
  return { post: await res.json() };
}

关键文件

+page.svelte	页面组件
+page.js / +page.ts	客户端/通用 load 函数
+page.server.js	仅服务端 load / 表单 action
+layout.svelte	共享布局包装器
+error.svelte	错误页面
+server.js	API 端点（GET、POST 等）

SVELTE 快速参考

Hello {name}!

Title