什么是组件通信？
在Web应用中，组件通信是指不同组件之间传递数据和触发事件的过程。组件通信是构建复杂应用的重要部分，因为它帮助我们保持代码的模块化和可维护性。
父组件向子组件传递数据
父组件可以通过属性（props）向子组件传递数据。这是一种单向数据流的方式，有助于维护组件的独立性和可预测性。
示例：
首先，在父组件中定义一个变量，并通过属性传递给子组件：
<!-- Parent.svelte -->
<script>
let message = 'Hello from parent!';
</script>
<Child message={message} />然后，在子组件中接收并使用这个属性：
<!-- Child.svelte -->
<script>
export let message;
</script>
<p>{message}</p>子组件向父组件发送事件
子组件可以通过触发事件来通知父组件。这种方式使得子组件可以与父组件进行交互，而无需直接访问父组件的数据或方法。
示例：
首先，在子组件中定义一个事件处理函数，并触发事件：
-- -------------------- ---- -------
---- ------------ ---
--------
------ - --------------------- - ---- ---------
----- -------- - ------------------------
-------- ------------- -
---------------------- - ------- ----- -- - ------- ---- ------- ---
-
---------
------- ---------------------------- -----------然后，在父组件中监听并处理这个事件：
<!-- Parent.svelte -->
<script>
function handleChildEvent(event) {
console.log(event.detail);
}
</script>
<Child on:childEvent={handleChildEvent} />同级组件之间的通信
同级组件之间不能直接通信，但可以通过共享状态管理器（如Store）来实现间接通信。
示例：
首先，创建一个共享的Store：
// Store.js
import { writable } from 'svelte/store';
export const sharedMessage = writable('');然后，在一个组件中更新Store的值：
<!-- ComponentA.svelte -->
<script>
import { sharedMessage } from './Store.js';
</script>
<input bind:value={$sharedMessage} />
<p>Value in ComponentA: {$sharedMessage}</p>最后，在另一个组件中读取Store的值：
<!-- ComponentB.svelte -->
<script>
import { sharedMessage } from './Store.js';
</script>
<p>Value in ComponentB: {$sharedMessage}</p>使用Context进行组件间通信
Context提供了一种机制，允许在组件树中的任意位置传递数据，而不必手动逐层传递props。
示例：
首先，创建一个Context：
-- -------------------- ---- ------- -- ---------- ------ - ----------- ---------- - ---- --------- ------ ----- --------- - ----- ------ -- - --------------- ------- -- ------ ----- ------------ - ----- -- - ------ ---------------- --
然后，在父组件中设置Context的值：
-- -------------------- ---- ------- ---- ------------- --- -------- ------ - --------- - ---- --------------- ------ -------------- ---- -------------------------- --------- --------- ---------- --------------- -- ---------- -------- ------------------ ------ ---- ---------- ---------
最后，在子组件中获取Context的值：
<!-- ChildComponent.svelte -->
<script>
import { useMyContext } from './Context.js';
</script>
<p>{useMyContext('myKey')}</p>通过这些方法，我们可以灵活地实现组件间的通信，使得我们的应用更加模块化和易于维护。