如何在Svelte组件之间传递数据和事件

在Svelte组件之间传递数据和事件可以通过props和自定义事件来实现。

1. 通过props传递数据：在父组件中通过props将数据传递给子组件。在子组件中通过props属性来接收传递过来的数据。例如：

<!-- ParentComponent.svelte -->
<script>
    import ChildComponent from './ChildComponent.svelte';

    let data = 'Hello from parent component';
</script>

<ChildComponent data={data} />

<!-- ChildComponent.svelte -->
<script>
    export let data;
</script>

<p>{data}</p>

2. 通过自定义事件传递数据：在子组件中通过dispatch方法触发自定义事件，并传递数据给父组件。在父组件中监听子组件的自定义事件，并处理传递过来的数据。例如：

<!-- ChildComponent.svelte -->
<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();

    function sendData() {
        const data = 'Hello from child component';
        dispatch('customEvent', data);
    }
</script>

<button on:click={sendData}>Send Data</button>

<!-- ParentComponent.svelte -->
<script>
    import ChildComponent from './ChildComponent.svelte';

    let receivedData;

    function handleCustomEvent(event) {
        receivedData = event.detail;
    }
</script>

<ChildComponent on:customEvent={handleCustomEvent} />

<p>{receivedData}</p>

通过以上两种方式，可以在Svelte组件之间传递数据和事件。