0Pricing
Sveltejs Academy · 课时

使用 createEventDispatcher 创建自定义事件

从子组件发出类型化的自定义事件，供父组件处理。

使用 createEventDispatcher 创建自定义事件 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。

为什么使用自定义事件

子组件通过分发自定义事件向上传递信息，由父组件监听这些事件。

导入事件分发器

从 svelte 导入 createEventDispatcher，并在脚本中创建一个分发器。

<script>
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();
</script>

分发事件

调用 dispatch(name, detail) 来发出事件。父组件使用 on:name 进行监听。

function save() { dispatch("save", { id: 42 }); }

在父组件中监听

请像处理 DOM 事件一样处理自定义事件。

<Child on:save={(e) => console.log(e.detail.id)} />

事件详细信息

第二个参数会在使用方一侧成为 event.detail。

默认不会冒泡

自定义事件不会自动在 Svelte 组件树中冒泡。如有需要，请显式转发。

类型化事件

使用 TypeScript 时，您可以为事件指定类型，以便父组件获得自动补全。

const dispatch = createEventDispatcher<{ save: { id: number } }>();

可取消事件

将 { cancelable: true } 作为第三个参数传入，即可允许父组件调用 preventDefault。

多个事件

一个分发器可以发出多种事件类型；请根据不同意图使用唯一的名称。

避免使用通用名称

相比通用的 change，更推荐使用 itemSelected 这样的具体名称。

事件与回调函数

事件适合传递向上的信号；如果需要紧密集成，请考虑传递回调属性。

快速检查

父组件如何读取事件数据？

回顾

使用 createEventDispatcher 发出带有详细信息负载的命名事件，并使用 on:eventName 进行监听。

常见问题解答

「使用 createEventDispatcher 创建自定义事件」课时是免费的吗？

是的 — 「使用 createEventDispatcher 创建自定义事件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。

「使用 createEventDispatcher 创建自定义事件」这节课中我会学到什么？

从子组件发出类型化的自定义事件，供父组件处理。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Sveltejs Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「使用 createEventDispatcher 创建自定义事件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Sveltejs Academy 课中编写并运行代码吗？

能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. on:click、on:input、on:submit
  2. 事件修饰符：preventDefault、stopPropagation、once
  3. 使用 createEventDispatcher 创建自定义事件
  4. 使用 on:click 转发事件
← 返回 Sveltejs Academy