组件基础

组件是 Svelte 应用的积木。每个 .svelte 文件就是一个组件，可以被导入、复用、组合。

一个组件的结构

一个 .svelte 文件由三部分组成，都是可选的：

<script>
  // 逻辑：状态、函数、props
  let name = $state('世界');
</script>

<!-- 模板：HTML + Svelte 语法 -->
<h1>你好，{name}！</h1>

<style>
  /* 样式：默认是局部作用域的 */
  h1 {
    color: #ff3e00;
  }
</style>

• <script> —— 组件的逻辑
• 模板 —— 组件渲染的 HTML
• <style> —— 组件的样式，默认只作用于本组件（局部作用域，不会泄漏）

导入和使用组件

<script>
  import Counter from './Counter.svelte';
  import Card from './Card.svelte';
</script>

<Counter />
<Card title="标题">内容</Card>

组件名首字母大写，使用方式像 HTML 标签。

组件间传递数据：$props

子组件用 $props() 声明它接收的属性：

<!-- Greeting.svelte -->
<script>
  let { name, excited = false } = $props();
</script>

<p>你好，{name}{excited ? '！' : ''}</p>

<!-- 父组件 -->
<script>
  import Greeting from './Greeting.svelte';
</script>

<Greeting name="小明" />
<Greeting name="小红" excited />

详见 $props 与绑定。

组件的局部状态

每个组件实例拥有自己独立的状态。多次使用同一组件，它们的 $state 互不干扰：

<script>
  import Counter from './Counter.svelte';
</script>

<!-- 两个独立的计数器，各自维护自己的 count -->
<Counter />
<Counter />

挂载组件（Svelte 5 新 API）

在应用入口，Svelte 5 用 mount() 把根组件挂到 DOM：

import { mount } from 'svelte';
import App from './App.svelte';

const app = mount(App, {
  target: document.getElementById('app'),
  props: { initialCount: 0 } // 传给根组件的 props
});

卸载时用 unmount(app)。

迁移提示

Svelte 4 的 new App({ target }) 已被 mount(App, { target }) 取代。这是 Svelte 5 的重要 API 变化。

组件就是普通模块

.svelte 文件编译后是一个普通的 ES 模块，导出一个组件函数。这意味着：

• 可以按需动态导入：const { default: Comp } = await import('./Comp.svelte')
• 可以在测试中直接 import 并 mount
• 可以放进 src/lib 作为可复用库发布

试一试：组件组合

下面的卡片组件通过 $props 接收 Snippets 内容，展示了组件如何组合。点点赞按钮看父子状态如何联动：

Snippets · {@render}Svelte 5 · Live

小结

要点	说明
文件即组件	一个 .svelte 文件 = 一个组件
三段式	<script> / 模板 / <style>（均可选）
局部样式	<style> 默认作用域隔离
$props()	声明接收的属性
独立状态	每个实例的 $state 相互隔离
mount()	Svelte 5 挂载组件的新 API

下一步：模板语法 —— 在模板里能写些什么。