面试题：Svelte中如何创建并分发一个简单的自定义事件

Question

在Svelte中，描述创建一个自定义事件并将其分发给父组件的基本步骤，并给出相应的代码示例。

Answer 1

1. 在子组件中创建和分发自定义事件：
   • 首先，在子组件中，使用 createEventDispatcher 函数来创建一个事件分发器。这个函数是 Svelte 提供的用于创建分发事件机制的工具。
   • 然后，在需要的地方，比如某个按钮的点击事件处理函数中，使用事件分发器来触发自定义事件，并可以传递相关的数据。
   • 以下是子组件 Child.svelte 的代码示例：

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();
    function handleClick() {
        const data = { message: 'Hello from child!' };
        dispatch('custom - event', data);
    }
</script>

<button on:click={handleClick}>Click me to dispatch custom event</button>

2. 在父组件中监听自定义事件：
   • 在父组件中，引入子组件，并使用 on:自定义事件名 的形式来监听子组件分发的自定义事件。
   • 以下是父组件 Parent.svelte 的代码示例：

<script>
    import Child from './Child.svelte';
    function handleCustomEvent(event) {
        console.log('Received custom event data:', event.detail);
    }
</script>

<Child on:custom - event={handleCustomEvent} />

在上述代码中：

• 子组件 Child.svelte 创建了一个 custom - event 自定义事件，并在按钮点击时分发该事件，同时传递了一个包含 message 的对象数据。
• 父组件 Parent.svelte 监听了 Child.svelte 分发的 custom - event 事件，并在事件触发时，通过 event.detail 获取子组件传递的数据并打印到控制台。