面试题：Svelte 中实现跨组件数据传递的常见方式有哪些

Question

请阐述 Svelte 组件通信时，父子组件、兄弟组件之间数据传递分别常用的方法，并举例说明如何在代码中实现父子组件间的数据传递。

Answer 1

父子组件通信常用方法

1. 父传子：通过属性（props）传递数据。父组件将数据作为属性传递给子组件，子组件通过接收这些属性来获取数据。
2. 子传父：通过事件（events）传递数据。子组件触发一个自定义事件，并将数据作为事件参数传递，父组件监听这个事件来接收数据。

兄弟组件通信常用方法

1. 通过共享状态：可以使用一个外部的状态管理库（如 Svelte Store）来共享数据，兄弟组件都从这个共享状态读取和写入数据，从而实现通信。
2. 通过父组件中转：兄弟组件通过父组件来传递数据，一个兄弟组件将数据传递给父组件，父组件再将数据传递给另一个兄弟组件。

父子组件间数据传递代码示例

1. 父组件（App.svelte）

<script>
    import ChildComponent from './ChildComponent.svelte';
    let parentData = 'Hello from parent';
</script>

<ChildComponent data={parentData} />

2. 子组件（ChildComponent.svelte）

<script>
    export let data;
</script>

<p>{data}</p>

在上述代码中，父组件 App.svelte 定义了一个 parentData 变量，并将其作为 data 属性传递给子组件 ChildComponent.svelte。子组件通过 export let data 接收这个属性，并在页面上显示该数据。