面试题：Svelte组件间通信中Props与事件派发的基础应用

Question

请描述在Svelte中如何通过Props向子组件传递数据，以及子组件如何通过事件派发将数据传递回父组件。请给出一个简单的代码示例来说明这两种通信方式的结合使用。

Answer 1

1. 通过Props向子组件传递数据

在Svelte中，父组件向子组件传递数据通过在子组件标签上设置属性来实现。子组件通过声明同名的变量来接收这些数据。

2. 子组件通过事件派发将数据传递回父组件

子组件可以通过 createEventDispatcher 创建一个事件派发器，然后使用这个派发器来触发自定义事件，父组件可以通过 on:eventname 的方式监听这些事件并获取数据。

3. 代码示例

以下是一个简单的父子组件通信示例：

父组件 App.svelte

<script>
    import Child from './Child.svelte';
    let dataFromChild;
    function handleChildEvent(data) {
        dataFromChild = data;
    }
</script>

<Child message="Hello from parent" on:childEvent={handleChildEvent}/>

{#if dataFromChild}
    <p>Data received from child: {dataFromChild}</p>
{/if}

子组件 Child.svelte

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();
    let message;
    function sendDataBack() {
        dispatch('childEvent', 'Hello from child');
    }
</script>

<button on:click={sendDataBack}>Send data to parent</button>
<p>{message}</p>

在上述代码中：

• 父组件 App.svelte 通过 message 属性向子组件 Child.svelte 传递数据，并通过 on:childEvent 监听子组件触发的 childEvent 事件。
• 子组件 Child.svelte 接收父组件传递的 message 属性并显示，同时在按钮点击时通过 dispatch 触发 childEvent 事件，并传递数据 'Hello from child' 回父组件。父组件在监听到事件后更新 dataFromChild 并显示。