如何使用 HTML 父子关系中的 2 个 Svelte 组件将数据从子级传递到父级

我是 Svelte 的新手。我在 HTML 父子关系中有 2 个 Svelte 组件，而不是 Svelte P/C 关系（其中 1 个 Svelte 组件导入另一个组件）。

最终，我想要这样的东西（可能有很多 Accs。）：

  <Accordion header={--property from SvelteComponent-- }>
    <SvelteComponent />
  </Accordion>

我希望 SvelteComponent 定义 Accordion 中使用的标头（它可以是动态的）。 我可以使用商店来做到这一点，但这似乎太混乱了。 Accordion 确实包含一个插槽，但我不知道如何向上传递信息。有人能建议一条前进的道路吗？

一种选择是使用组件绑定。这允许容器组件范围内的值和所包含组件的 prop 之间进行双向绑定。

<Accordion {header}>
    <SvelteComponent bind:header={header} />
</Accordion>

and in SvelteComponent.svelte:

<script>
    export let header = "defaultHeader";
</script>

每当 SvelteComponent 对 defaultHeader 进行更改时，它都会通过绑定到包含 Accordion 和 SvelteComponent 的文件进行传播，并向下应用更改。https://svelte.dev/tutorial/component-bindings https://svelte.dev/tutorial/component-bindings

或者，您可以提供setHeader函数作为 SvelteComponent 的 prop，它设置 header 的值：

//SvelteComponent.svelte
<script>
    export let setHeader;
</script>

<div on:click={() => setHeader("myHeader")}>
    My Svelte Component
</div>