Svelte组件通信与状态同步：实现父子组件间的响应式更新

<!-- TableRow.svelte -->
<script>
    // isCollapsed 现在是一个从父组件接收的prop
    export let isCollapsed = true; 
    export let rowData = {};
    export let labels = {};
    export let id = -1;
    // ... 其他props
</script>

<tr>
    <!-- ... 其他td ... -->
    <td colspan="3">
        <!-- 根据isCollapsed的值显示不同的图标 -->
        <span>
            {labels.realised} [{#if isCollapsed}<i class="fa fa-plus"></i>{:else}<i class="fa fa-minus"></i>{/if}]
        </span>
    </td>
    <!-- ... 其他td ... -->
</tr>

<!-- TableRow.svelte -->
<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();

    export let rowData = {};
    export let labels = {};
    export let id = -1;
    export let isCollapsed = true; // 从父组件接收的prop

    // 点击事件处理器，派发一个'toggle'事件，并附带当前行的id和折叠状态
    function handleClick() {
        dispatch('toggle', { id: id, currentCollapsedState: isCollapsed });
    }
</script>

<tr>
    <td>{rowData.season}</td>
    <td>{rowData.farm}</td>
    <td>{rowData.block}</td>
    <td>{rowData.date}</td>
    <td>{rowData.totals}</td>
</tr>
<tr>
    <td colspan="3">
        <span role="button" on:click={handleClick}>
            {labels.realised} [{#if isCollapsed}<i class="fa fa-plus"></i>{:else}<i class="fa fa-minus"></i>{/if}]
        </span>
    </td>
    <td>{rowData.realised_date ?? "--"}</td>
    <td>{rowData.realised_total ?? "--"}</td>
</tr>

<!-- App.svelte -->
<!-- ... -->
<tr class:collapse={collapsedStates[t.id]} aria-expanded={!collapsedStates[t.id]}>
    <td colspan="{colspan}">
        <FormRow onSubmit={onSubmit}/>
    </td>
</tr>
<!-- ... -->

<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();

    export let rowData = {};
    export let labels = {};
    export let id = -1;
    export let isCollapsed = true; // 从父组件接收的prop

    function handleClick() {
        // 派发一个toggle事件，携带当前行的id和当前折叠状态
        dispatch('toggle', { id: id, currentCollapsedState: isCollapsed });
    }
</script>

<tr>
    <td>{rowData.season}</td>
    <td>{rowData.farm}</td>
    <td>{rowData.block}</td>
    <td>{rowData.date}</td>
    <td>{rowData.totals}</td>
</tr>
<tr>
    <td colspan="3">
        <span role="button" on:click={handleClick}>
            {labels.realised} [{#if isCollapsed}<i class="fa fa-plus"></i>{:else}<i class="fa fa-minus"></i>{/if}]
        </span>
    </td>
    <td>{rowData.realised_date ?? "--"}</td>
    <td>{rowData.realised_total ?? "--"}</td>
</tr>

<script>
    import FormRow from './FormRow.svelte';
    import TableRow from './TableRow.svelte';

    let table = [
        {id:1,block:"X",farm:"xY",season:2023,total:3400, date:"2023-01-23", realised_date: "2023-02-01", realised_total: 3500},
        {id:2,block:"Y",farm:"zW",season:2024,total:4000, date:"2024-03-15", realised_date: null, realised_total: null}
    ];

    // 使用一个对象来管理每行的折叠状态，key为row.id
    let collapsedStates = {};

    // 响应式声明，当table数据变化时，初始化或更新collapsedStates
    $: {
        if (table) {
            table.forEach(row => {
                // 如果该行ID的折叠状态尚未定义，则默认设为true（折叠）
                if (!(row.id in collapsedStates)) {
                    collapsedStates[row.id] = true; 
                }
            });
        }
    }

    let loading = true;
    let colspan = 4; // 表格的colspan，注意与thead列数匹配
    let labels = {
        block: "Block",
        date: "Date",
        season: "Season",
        realised: "Realised",
        no_data: "No data",