组件传值

约 184 字小于 1 分钟

2026-09-18

在 svelte 中，组件之间的传值主要通过 props 和 事件 来实现。父组件可以通过 props 将数据传递给子组件，而子组件可以通过触发自定义事件将数据传回父组件。

在 svelte 中，插入值只需要使用一对花括号即可，而且也不需要 template 标签，直接在组件中使用即可。

/src/routes/Header.svelte

<script lang="ts">
  // 如果你这个属性是可选的, 直接使用 ts 语法去设置他为可选即可
  const {name}:{name:stirng} = $props();
</script>

<h1>{name}</h1>

/src/routes/index.svelte

<script lang="ts">
  import Header from './Header.svelte';

  const name = "Hello Svelte";
</script>

<Header name={name} />

<!-- 有两种使用方式 -->
<Header {name} />