Props

Declaring Props

如果你需要將變數從父元件傳遞到子元件，你可以在子元件使用 $props 關鍵字來宣告子元件的 Props：

<script>
  let { name } = $props;
</script>

然後你就可以在父元件中使用 name="world" 將 world 傳入子元件中：

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

<Nested name="world" />

Default Values

你可以在宣告 Props 的時候指定預設值：

<script>
  let { name = 'world' } = $props;
</script>

Spread Props

假設我們有一個元件叫做 PackageInfo，它有四個 Props：name、speed、version、website。

<script>
  let { name, speed, version, website } = $props;

  let href = $derived(`https://www.npmjs.com/package/${name}`);
</script>

<p>
    The <code>{name}</code> package is {speed} fast. Download version {version} from
    <a {href}>npm</a> and <a href={website}>learn more here</a>
</p>

你可以使用下面的方式將這四個 Props 傳入子元件：

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

  const pkg = {
    name: 'svelte',
    speed: 'blazing',
    version: 4,
    website: 'https://svelte.dev'
  };
</script>

<PackageInfo
    name={pkg.name}
    speed={pkg.speed}
    website={pkg.website}
/>

也可以使用 ... 來將物件的所有屬性傳入子元件：

<PackageInfo {...pkg} />