$props 与绑定

$props 用于声明组件接收的属性（props）。它是 Svelte 5 中父子组件通信的核心。

基本用法

在 Svelte 5 里，props 用解构语法声明：

<!-- Answer.svelte -->
<script>
  let { answer } = $props();
</script>

<p>答案是 {answer}</p>

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

<Answer answer={42} />

对比 Svelte 4 的 export let answer，$props() 用解构，更贴近普通 JavaScript，也更容易加默认值和类型。

默认值

直接在解构里给默认值：

<script>
  let { name = '访客', age = 18 } = $props();
</script>

<p>{name}，{age} 岁</p>

收集剩余 props

用展开语法收集没显式声明的属性，常用于把它们透传给原生元素：

<script>
  let { children, ...rest } = $props();
</script>

<!-- rest 里的 class、id、onclick 等都会应用到 button 上 -->
<button {...rest}>
  {@render children?.()}
</button>

TypeScript 类型

给 props 加类型非常自然：

<script lang="ts">
  interface Props {
    title: string;
    count?: number;
  }
  let { title, count = 0 }: Props = $props();
</script>

<h2>{title}（{count}）</h2>

$bindable —— 双向绑定

默认情况下 props 是单向的：子组件不能修改它。如果希望父组件用 bind: 与子组件双向同步，就用 $bindable：

<!-- VolumeControl.svelte -->
<script>
  // volume 可被父组件 bind，子组件内部也能修改它
  let { volume = $bindable(50) } = $props();
</script>

<input type="range" min="0" max="100" bind:value={volume} />
<span>{volume}</span>

<!-- 父组件 -->
<script>
  import VolumeControl from './VolumeControl.svelte';
  let volume = $state(50);
</script>

<!-- bind:volume 建立双向绑定 -->
<VolumeControl bind:volume />
<p>父组件里的音量：{volume}</p>

TIP

不带 bind: 时，$bindable(default) 里的 default 会作为初始值；子组件内部的修改不会传回父组件。带 bind: 时，两边的修改会实时同步。

试一试：$props + $bindable

拖动滑块，父组件里的 volume 会同步变化；点「静音」按钮，子组件的滑块也会跟着变 —— 这就是双向绑定：

双向绑定 · $bindableSvelte 5 · Live

对应源码（父组件）：

<script>
  import VolumeControl from './VolumeControl.svelte';
  let volume = $state(50);
  let muted = $derived(volume === 0);
</script>

<VolumeControl bind:volume />

<button onclick={() => (volume = muted ? 50 : 0)}>
  {muted ? '取消静音' : '静音'}
</button>

试一试：$props 主题切换

下面这个组件用 $props 接收 theme（$bindable）和 label（普通 prop 带默认值），点击即切换：

主题切换 · $props / $bindableSvelte 5 · Live

小结

要点	说明
let { a, b } = $props()	声明 props（解构语法）
= 默认值	直接给默认值
...rest	收集并透传剩余属性
: Props	用 TypeScript 接口标注类型
$bindable(默认值)	让 prop 支持父组件 bind: 双向绑定
取代	Svelte 4 的 export let

下一步：Runes API 速查，或继续看组件基础。