面试题：Svelte中自定义事件创建与监听基础

Question

在Svelte中，简述如何创建一个自定义事件，并在组件内部和父组件中监听该事件，请给出简单代码示例。

Answer 1

1. 在Svelte组件中创建并触发自定义事件：
   • 使用 createEventDispatcher 来创建事件分发器。
   • 在组件内部合适的地方通过事件分发器触发事件。 示例代码如下：

   <script>
     import { createEventDispatcher } from'svelte';
   
     const dispatch = createEventDispatcher();
   
     function handleClick() {
       dispatch('custom - event', { data: 'Some data' });
     }
   </script>
   
   <button on:click={handleClick}>触发自定义事件</button>
   

2. 在组件内部监听自定义事件：
   • 使用 on:自定义事件名 的语法来监听。 示例代码如下：

   <script>
     import { createEventDispatcher } from'svelte';
   
     const dispatch = createEventDispatcher();
   
     function handleClick() {
       dispatch('custom - event', { data: 'Some data' });
     }
   
     function handleCustomEvent(event) {
       console.log('组件内部监听到自定义事件:', event.detail.data);
     }
   </script>
   
   <button on:click={handleClick}>触发自定义事件</button>
   <div on:custom - event={handleCustomEvent}>组件内部监听区域</div>
   

3. 在父组件中监听子组件的自定义事件：
   • 假设子组件名为 Child.svelte，内容如下：

   <!-- Child.svelte -->
   <script>
     import { createEventDispatcher } from'svelte';
   
     const dispatch = createEventDispatcher();
   
     function handleClick() {
       dispatch('custom - event', { data: 'Some data from child' });
     }
   </script>
   
   <button on:click={handleClick}>子组件触发自定义事件</button>
   

   • 父组件代码如下：

   <!-- Parent.svelte -->
   <script>
     import Child from './Child.svelte';
   
     function handleChildCustomEvent(event) {
       console.log('父组件监听到子组件的自定义事件:', event.detail.data);
     }
   </script>
   
   <Child on:custom - event={handleChildCustomEvent} />