如何在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組件之間傳遞數據和事件。