面试题：Svelte子组件如何向父组件派发事件

Question

请描述在Svelte中，子组件向父组件派发事件的具体步骤，并给出一个简单的代码示例，包括子组件如何定义和触发事件，父组件如何监听该事件。

Answer 1

子组件向父组件派发事件步骤：

1. 在子组件中使用 createEventDispatcher 来创建一个事件分发器。
2. 使用事件分发器触发自定义事件，并传递数据（如果需要）。

代码示例：

子组件（Child.svelte）

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

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

父组件（Parent.svelte）

<script>
    function handleCustomEvent(event) {
        console.log(event.detail.message);
    }
</script>

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