Svelte 组件通信

什么是组件通信？

在Web应用中，组件通信是指不同组件之间传递数据和触发事件的过程。组件通信是构建复杂应用的重要部分，因为它帮助我们保持代码的模块化和可维护性。

父组件向子组件传递数据

父组件可以通过属性（props）向子组件传递数据。这是一种单向数据流的方式，有助于维护组件的独立性和可预测性。

示例：

首先，在父组件中定义一个变量，并通过属性传递给子组件：

<!-- Parent.svelte -->
<script>
  let message = 'Hello from parent!';
</script>

<Child message={message} />

然后，在子组件中接收并使用这个属性：

<!-- Child.svelte -->
<script>
  export let message;
</script>

<p>{message}</p>

子组件向父组件发送事件

子组件可以通过触发事件来通知父组件。这种方式使得子组件可以与父组件进行交互，而无需直接访问父组件的数据或方法。

示例：

首先，在子组件中定义一个事件处理函数，并触发事件：

// www.javascriptcn.com code example
<!-- Child.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  function handleClick() {
    dispatch('childEvent', { detail: 'This is a message from child!' });
  }
</script>

<button on:click={handleClick}>Click me</button>

然后，在父组件中监听并处理这个事件：

<!-- 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：

// www.javascriptcn.com code example
// Context.js
import { getContext, setContext } from 'svelte';

export const myContext = (key, value) => {
  setContext(key, value);
};

export const useMyContext = (key) => {
  return getContext(key);
};

然后，在父组件中设置Context的值：

// www.javascriptcn.com code example
<!-- Parent.svelte -->
<script>
  import { myContext } from './Context.js';
  import ChildComponent from './ChildComponent.svelte';
</script>

{#context myContext}
  <ChildComponent />
{/context}

<script>
  myContext('myKey', 'Hello from context');
</script>

最后，在子组件中获取Context的值：

<!-- ChildComponent.svelte -->
<script>
  import { useMyContext } from './Context.js';
</script>

<p>{useMyContext('myKey')}</p>

通过这些方法，我们可以灵活地实现组件间的通信，使得我们的应用更加模块化和易于维护。