Svelte组件间通信与状态管理：解决父子组件响应式变量更新难题

<script>
    export let rowData = {};
    export let labels = {};
    export let id = -1;
    export let isCollapsed = true; // 声明为可导出属性，并提供默认值

    // 内部点击事件处理函数，直接修改isCollapsed
    function handleToggleClick() {
        isCollapsed = !isCollapsed; // Svelte会自动将此变化同步回父组件
    }
</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 data-row="{id}" role="button" on:click={handleToggleClick}>
            {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: 3000},
        {id:2,block:"Y",farm:"zW",season:2023,total:5000, date:"2023-01-25", realised_date: null, realised_total: null}
    ];

    // 使用一个对象来存储每行的折叠状态，键为行ID
    let rowCollapseStates = {};

    // 响应式声明，用于初始化每行的折叠状态
    $: if (table) {
        table.forEach(row => {
            if (rowCollapseStates[row.id] === undefined) {
                rowCollapseStates[row.id] = true; // 默认为折叠状态 (true表示折叠)
            }
        });
    }

    let loading = true;
    let colspan = 5; // 根据thead的列数调整
    let labels = {
        block: "Block",
        date: "Date",
        season: "Season",
        realised: "Realised",
        no_data: "No data",
        farm: "Farm",
        total: "Total"
    }

    const loaded = () => {
        loading = false;
        return "";
    };

    function onSubmit(e) {
        // do submit things
    }
</script>
<style>
    /* 定义 .collapse 和 .show 样式，由Svelte的class:指令控制 */
    :global(.collapse) {
        display: none;
    }
    :global(.collapse.show) {
        display: table-row; /* 显示为表格行 */
    }
    :global(.opaque) {
        pointer-events: none!important;
        opacity: 0.6!important;
        transition: opacity 0.5s ease-in-out!important;
    }
</style>
    <FormRow onSubmit={onSubmit}/>

    <div class="container-full p-2">
        <div class="row justify-content-center">
            <div class="col-lg-12 w-100">
                <table class="mobile-table mobile-table-bordered text-center w-100">
                    <thead>
                        <tr style="background-color: #81d5c0; color: rgb(63, 63, 63);">
                            <th>{labels.season}</th>
                            <th>{labels.farm}</th>
                            <th>{labels.block}</th>
                            <th>{labels.date}</th>
                            <th>{labels.total}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {#if table && table.length > 0}
                        {loaded()}
                            {#each table as t (t.id)}
                                <TableRow 
                                    id={t.id} 
                                    labels={labels} 
                                    rowData={t}
                                    bind:isCollapsed={rowCollapseStates[t.id]} <!-- 双向绑定每行的isCollapsed状态 -->
                                />
                                <!-- 隐藏/显示的可折叠行，根据rowCollapseStates[t.id]的值控制 -->
                                <tr id="row_form_{t.id}" class="collapse" class:show={!rowCollapseStates[t.id]} aria-expanded={!rowCollapseStates[t.id]}>
                                    <td colspan="{colspan}">
                                        <FormRow onSubmit={onSubmit}/>
                                    </td>
                                </tr>
                            {/each}
                        {:else}
                        {loaded()}
                            <tr>
                                <td colspan="{colspan}">{labels.no_data}</td>
                            </tr>
                        {/if}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

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