面试题：Svelte 组件间通信的规范制定及代码组织

父子组件通信

父传子：
- 在 Svelte 中，父组件向子组件传递数据是通过属性（props）来实现的。
- 例如，在父组件 Parent.svelte 中：
```
<script>
  let childData = "Hello from parent";
</script>

<Child {childData}/>
```
- 在子组件 Child.svelte 中，通过 export let 来接收父组件传递的数据：
```
<script>
  export let childData;
</script>
<p>{childData}</p>
```

子传父：

子组件向父组件传递数据通常通过事件（events）。
首先在子组件 Child.svelte 中定义并触发事件：

<script>
  const handleClick = () => {
    const dataToSend = "Data from child";
    $: dispatch('child - event', dataToSend);
  };
</script>
<button on:click={handleClick}>Send data to parent</button>

然后在父组件 Parent.svelte 中监听该事件：

<script>
  const handleChildEvent = (event) => {
    console.log(event.detail);
  };
</script>
<Child on:child - event={handleChildEvent}/>

兄弟组件通信

通过共享状态：

创建一个独立的状态管理模块，比如 store.js。
使用 Svelte 的 writable 来创建可写存储。例如：

import { writable } from'svelte/store';

export const sharedStore = writable('Initial value');

在第一个兄弟组件 Sibling1.svelte 中导入并更新共享状态：

<script>
  import { sharedStore } from './store.js';
  const updateSharedStore = () => {
    sharedStore.set('New value from Sibling1');
  };
</script>
<button on:click={updateSharedStore}>Update shared store</button>

在第二个兄弟组件 Sibling2.svelte 中导入并订阅共享状态：

<script>
  import { sharedStore } from './store.js';
  let sharedValue;
  const unsubscribe = sharedStore.subscribe((value) => {
    sharedValue = value;
  });
  $: onDestroy(() => {
    unsubscribe();
  });
</script>
<p>{sharedValue}</p>

项目层面统一通信方式

制定命名规范：
- 对于属性命名，采用驼峰命名法，且名称要有描述性，例如 userInfo 而非 ui。
- 对于事件命名，采用 event - type 的格式，如 user - updated，避免使用过于简单或模糊的名称。
文档化：
- 为每个组件编写文档，说明其接受的属性、触发的事件以及与其他组件通信的方式。可以使用工具如 svelte - docgen 来自动生成文档。
- 在文档中提供示例代码，展示如何正确地与该组件进行通信。
代码结构规范：
- 将状态管理相关的代码（如共享存储）放在专门的文件夹中，如 stores 文件夹。
- 对于组件通信逻辑复杂的组件，可以将通信相关的逻辑封装成独立的函数或模块，提高代码的可读性和可维护性。
建立代码审查机制：
- 在项目开发过程中，定期进行代码审查，确保所有组件间通信都遵循既定的规范。
- 通过代码审查发现并纠正不符合规范的通信方式，同时分享优秀的通信实践案例，提高团队整体的代码质量。

星途面试题库

面试题：Svelte 组件间通信的规范制定及代码组织

知识考点

面试题答案

父子组件通信

兄弟组件通信

项目层面统一通信方式