本文旨在深入探讨Svelte中父子组件间响应式变量的正确管理与通信机制。我们将解析直接DOM操作和变量作用域不匹配导致的问题，并介绍如何利用Svelte的属性（props）、双向绑定（bind:）、事件分发（createEventDispatcher）以及指令（class:）等核心特性，实现高效、可维护的组件交互与状态同步，避免手动DOM操作，充分发挥Svelte的响应式优势。
理解Svelte的响应式原理与组件作用域
在Svelte应用中，每个组件都有其独立的作用域。当一个变量在组件的
原始代码中存在的核心问题是：
- 作用域隔离：TableRow.svelte中的isCollapsed和App.svelte中的isCollapsed是两个完全独立的变量，它们之间没有任何关联。父组件修改其自身的isCollapsed并不会影响子组件的isCollapsed。
- 手动DOM操作：App.svelte中的toggleCollapsible函数通过document.getElementById().classList.toggle()直接修改了DOM元素的类。Svelte的设计理念是让开发者无需手动操作DOM，而是通过数据驱动UI。这种做法不仅破坏了Svelte的响应式机制，也增加了代码的复杂性和维护难度。
- 无效的响应式声明：TableRow.svelte中的$: isCollapsed语句是无效的。Svelte的响应式声明$:用于当一个变量的值依赖于其他响应式变量时，声明该变量也应是响应式的。例如，$: doubled = count * 2;。如果isCollapsed不依赖于其他响应式变量，$: isCollapsed本身并不会使其变得响应式，它只是一个空操作。
为了正确地实现父子组件之间的状态同步和交互，我们应该遵循Svelte提供的官方机制。
组件间通信：属性、绑定与事件
Svelte提供了多种机制来实现组件间的有效通信：
1. 通过属性（Props）传递数据（父到子）
父组件可以通过属性向子组件传递数据。在子组件中，使用export let声明的变量即为可接收的属性。
(isCollapsed = !isCollapsed)}> {labels.realised} [{#if isCollapsed}{:else}{/if}]
在父组件中，将数据绑定到子组件的属性上：
{#each table as t, idx (t.id)}
2. 双向绑定（bind:）实现父子状态同步
如果父组件需要
控制子组件的某个状态，同时子组件内部也可以修改这个状态，并且这些修改需要同步回父组件，那么可以使用bind:指令实现双向绑定。
(isCollapsed = !isCollapsed)}> {labels.realised} [{#if isCollapsed}{:else}{/if}]
父组件使用bind:isCollapsed：
{#each table as t, idx (t.id)}
{/each}通过bind:isCollapsed={collapsedStates[t.id]}，当TableRow内部的isCollapsed改变时，App.svelte中对应的collapsedStates[t.id]也会自动更新，反之亦然。
3. 通过事件（Events）进行子到父通信
当子组件需要通知父组件某个事件发生时，例如用户点击了某个按钮，但子组件本身不管理该状态，或者父组件需要执行更复杂的逻辑时，可以使用Svelte的事件分发机制。
{labels.realised} [{#if isCollapsed}{:else}{/if}]
父组件监听子组件派发的事件：
{#each table as t, idx (t.id)}
{/each}利用Svelte指令进行DOM操作
Svelte提供了丰富的指令来替代手动DOM操作，例如class:指令用于条件性地添加或移除CSS类。
这样，Svelte会自动根据isCollapsed或collapsedStates[t.id]的值来添加或移除相应的CSS类，无需手动调用classList.toggle()。
总结与最佳实践
为了构建健壮且易于维护的Svelte应用，请遵循以下最佳实践：
- 数据驱动UI：始终通过修改组件状态来更新UI，避免直接操作DOM。
- 明确组件职责：每个组件应管理其内部状态，并通过props接收外部数据，通过事件通知父组件。
- 使用export let定义属性：这是Svelte中父组件向子组件传递数据的标准方式。
- 利用bind:实现双向绑定：当父子组件需要共同管理和更新同一份状态时，bind:指令是简洁高效的选择。
- 使用createEventDispatcher进行子到父通信：当子组件需要通知父组件某个动作或状态变化时，派发自定义事件是最佳实践。
- 善用Svelte指令：利用class:、style:、on:等指令来处理DOM属性和事件，保持代码的声明性。
- 理解$:响应式声明：$:仅在变量依赖于其他响应式变量时才有效，不要滥用。
通过采纳这些Svelte原生机制，您可以构建出更具响应性、可读性且易于维护的应用程序。
