Svelte组件通信与状态管理：解决父子组件响应式更新问题的最佳实践

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

    export let rowData = {};
    export let labels = {};
    export let id = -1;
    export let isCollapsed = true; // 声明isCollapsed为一个prop，并提供默认值

    const dispatch = createEventDispatcher();

    // 当点击按钮时，派发一个事件通知父组件
    function handleToggle() {
        dispatch('toggle', { id });
    }
</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={handleToggle}>
            {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 -->
<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"},
        {id:2,block:"Y",farm:"zW",season:2024,total:5000, date:"2024-02-15"}
    ];

    // 使用 Map 管理每个行的折叠状态，键为行ID，值为布尔类型
    let collapsedStates = new Map();

    // 初始化 collapsedStates，确保每行都有一个初始状态
    // Svelte 的 $: 响应式声明可以在依赖项变化时运行代码块
    $: {
        if (table && table.length > 0) {
            table.forEach(row => {
                if (!collapsedStates.has(row.id)) {
                    collapsedStates.set(row.id, true); // 默认所有行都折叠
                }
            });
        }
    }

    let loading = true;
    let colspan = 4;
    let labels = {
        block: "Block",
        date: "Date",
        season: "Season",
        realised: "Realised",
        no_data: "No data",
        farm: "Farm",
        total: "Total"
    }

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

    // 处理 TableRow 组件派发的 'toggle' 事件
    function handleToggleCollapsible(event) {
        const { id } = event.detail; // 从事件详情中获取行ID
        // 更新对应行的折叠状态
        collapsedStates.set(id, !collapsedStates.get(id));
        // 触发 Svelte 的响应式更新：当 Map/Set 内部数据改变时，需要重新赋值给变量
        collapsedStates = collapsedStates;
    }

    function onSubmit(e) {
        // do submit things
    }
</script>

<style>
    /* 定义 .collapse 和 .show 样式，Svelte 会根据 class: 指令自动切换 */
    .collapse {
        display: none;
    }
    .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}
                                isCollapsed={collapsedStates.get(t.id)} {/* 将对应行的折叠状态传递给 TableRow */}
                                on:toggle={handleToggleCollapsible} {/* 监听 TableRow 派发的 'toggle' 事件 */}
                            />
                            <!-- 使用 class: 指令动态添加/移除 'show' 类 -->
                            <tr id="row_form_{t.id}" class="collapse" class:show={!collapsedStates.get(t.id)} aria-expanded={!collapsedStates.get(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