面试题：Svelte中如何实现自定义事件并传递数据

在Svelte组件里自定义事件并传递数据的步骤：
- 步骤一：定义事件
  - 在Svelte组件内部，使用createEventDispatcher函数来创建一个事件分发器。这个函数是Svelte提供的用于自定义事件的工具。
- 步骤二：触发事件并传递数据
  - 在组件的适当逻辑位置（例如按钮点击事件处理函数中），使用事件分发器来触发自定义事件，并将需要传递的数据作为参数传入。
- 步骤三：在父组件中监听事件并接收数据
  - 在父组件使用子组件标签时，通过on:自定义事件名的方式来监听子组件触发的自定义事件，并在事件处理函数中接收子组件传递过来的数据。
代码示例：
- 子组件（Child.svelte）：

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();
    const sendDataToParent = () => {
        const dataToSend = { message: 'Hello from child!' };
        dispatch('custom - event', dataToSend);
    };
</script>
<button on:click={sendDataToParent}>Send data to parent</button>

父组件（Parent.svelte）：

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

在上述代码中，Child.svelte组件创建了一个自定义事件custom - event，并在按钮点击时触发该事件，同时传递一个包含消息的数据对象。Parent.svelte组件监听custom - event事件，并在事件处理函数handleCustomEvent中接收并打印从子组件传递过来的数据。注意，在事件处理函数中，通过event.detail来获取子组件传递的数据。

星途面试题库

面试题：Svelte中如何实现自定义事件并传递数据

知识考点

面试题答案