面试题：Svelte组件化之数据传递

Question

在Svelte组件化开发中，如何实现父组件向子组件传递数据？请举例说明。如果子组件需要将数据反向传递给父组件，又该如何实现？

Answer 1

父组件向子组件传递数据

在Svelte中，父组件向子组件传递数据通过在子组件标签上设置属性的方式实现。

假设我们有一个父组件 Parent.svelte 和一个子组件 Child.svelte。

Child.svelte

<script>
    export let message;
</script>

<p>{message}</p>

这里通过 export let 声明了一个名为 message 的变量，用于接收父组件传递的数据。

Parent.svelte

<script>
    import Child from './Child.svelte';
    let data = 'Hello from parent';
</script>

<Child message={data} />

在父组件中，引入 Child 组件，并在使用 Child 组件标签时，将 data 变量作为 message 属性传递给子组件。

子组件向父组件反向传递数据

子组件向父组件传递数据可以通过自定义事件来实现。

Child.svelte

<script>
    import { createEventDispatcher } from'svelte';
    const dispatch = createEventDispatcher();
    function sendDataToParent() {
        let data = 'Hello from child';
        dispatch('customEvent', data);
    }
</script>

<button on:click={sendDataToParent}>Send data to parent</button>

这里使用 createEventDispatcher 创建一个事件分发器 dispatch，在按钮点击时，通过 dispatch 触发名为 customEvent 的自定义事件，并传递数据。

Parent.svelte

<script>
    import Child from './Child.svelte';
    let receivedData;
    function handleCustomEvent(event) {
        receivedData = event.detail;
    }
</script>

<Child on:customEvent={handleCustomEvent} />
{#if receivedData}
    <p>Received from child: {receivedData}</p>
{/if}

在父组件中，通过 on:customEvent 监听子组件触发的 customEvent 事件，事件处理函数 handleCustomEvent 中的 event.detail 即为子组件传递的数据。