面试题：Svelte中如何在子组件定义并触发自定义事件供父组件监听

Question

请描述在Svelte中，子组件创建自定义事件并触发，使得父组件能够监听并响应这个自定义事件的具体步骤和代码示例。

Answer 1

1. 子组件创建并触发自定义事件步骤：
   • 在子组件中使用 createEventDispatcher 函数来创建一个事件分发器。
   • 通过事件分发器来触发自定义事件，并可以传递数据。
2. 父组件监听并响应自定义事件步骤：
   • 在父组件引入子组件时，使用 on:eventname 语法来监听子组件触发的自定义事件。
   • 定义事件处理函数来响应这个自定义事件。

代码示例

子组件 Child.svelte

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

    function handleClick() {
        const data = { message: '这是来自子组件的数据' };
        dispatch('custom - event', data);
    }
</script>

<button on:click={handleClick}>触发自定义事件</button>

父组件 Parent.svelte

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

    function handleCustomEvent(event) {
        console.log('接收到子组件的自定义事件数据:', event.detail);
    }
</script>

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