面试题：Svelte中如何通过Props实现动态组件间的单向通信

Question

在Svelte中，假设有一个父组件`Parent.svelte`和一个子组件`Child.svelte`，请描述并给出代码示例，如何在父组件中传递数据给子组件，并在子组件中展示该数据，其中子组件为动态加载的组件。

Answer 1

1. 父组件 Parent.svelte

在父组件中，我们定义一个数据变量，并通过 {#await} 块动态加载子组件 Child.svelte，同时传递数据给子组件。

<script>
    // 定义要传递的数据
    const dataToPass = "Hello from parent";

    let ChildComponent;
    // 动态导入子组件
    import('./Child.svelte')
      .then(module => {
            ChildComponent = module.default;
        });
</script>

{#await ChildComponent}
    Loading...
{:then Child}
    <Child data={dataToPass} />
{/await}

2. 子组件 Child.svelte

在子组件中，通过 export let 接收父组件传递的数据，并展示出来。

<script>
    // 接收父组件传递的数据
    export let data;
</script>

<p>{data}</p>