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

Question

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

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

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

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

Answer 1

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

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

在 SvelteComponent.svelte 中：

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

每当 SvelteComponent 对 defaultHeader 进行更改时，它将通过与包含 Accordion 和 SvelteComponent 的文件的绑定进行备份，并将更改向下应用。 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>