面试题：Svelte组件间自定义事件传递与处理

Question

描述Svelte组件之间如何自定义事件并进行传递和处理。假设存在父组件Parent和子组件Child，子组件触发一个自定义事件，父组件捕获并处理该事件，给出完整的Svelte代码实现这一过程。

Answer 1

1. 创建子组件 Child.svelte：

   <script>
       let count = 0;
       function increment() {
           count++;
           // 使用 `createEventDispatcher` 创建事件分发器
           const dispatch = createEventDispatcher();
           // 触发自定义事件 `count-changed`，并传递数据
           dispatch('count-changed', { newCount: count });
       }
   </script>
   
   <button on:click={increment}>Increment in Child</button>
   

2. 创建父组件 Parent.svelte：

   <script>
       import Child from './Child.svelte';
       function handleCountChange(event) {
           console.log('Count changed in child, new value:', event.detail.newCount);
       }
   </script>
   
   <Child on:count-changed={handleCountChange} />
   

在上述代码中：

• 在子组件 Child.svelte 中，使用 createEventDispatcher 创建事件分发器，通过 dispatch 方法触发自定义事件 count - changed，并传递 count 的最新值。
• 在父组件 Parent.svelte 中，引入子组件 Child，并通过 on:自定义事件名 的方式监听子组件触发的 count - changed 事件，在 handleCountChange 函数中处理接收到的数据。