如何在HTML父子关系中使用2个Svelte组件将数据从子代传给父代？

Question

我是Svelte的新手。我有2个Svelte组件处于HTML父子关系中--与Svelte PC关系相反（其中一个Svelte组件导入另一个）。

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

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

我想让SvelteComponent定义Accordion中使用的头（它可以是动态的）.我可以使用store来实现这一点，但这似乎太混乱了。Accordion确实包含一个槽，但我看不到如何向上传递信息。有谁能建议一个前进的路径？

Answer 1

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

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

并在SvelteComponent.svelte.Svelte中。

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

每当SvelteComponent对defaultHeader进行更改时，它将通过绑定回传到包含Accordion和SvelteComponent的文件，并向下应用更改。https:/svelte.devtutorialcomponent-bindings）。

或者，你可以提供一个 setHeader 函数作为SvelteComponent的一个道具，设置header的值。

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

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

Answer 2

Svelte可以很好地摆脱模板和不必要的额外代码。我想尽可能地把这一点。

我相信使用@skeletizzle的答案，我必须为每个Accordion及其子代添加一个变量到Accordions的容器中。这就是我想要消除的（它污染了容器的命名空间，只是一个微不足道的操作）。由于Accordion和它的子代处于PC关系中--它们互相了解，编译器可以直接进行通信。想象一下一个隐含的接口，在这个接口中，Accordion在它的子代中寻找一个名为 "header "的道具，自动地，反应性地，将其用于自己的header道具。

我要做的是使用存储空间，虽然如上所述，我觉得它们太重了--但我不认为我有其他选择。

WrappedComponent.svelte

<script context="module">
  import { writable } from 'svelte/store'
  export let thisComponentHeader = writable('default header')
</script>

App.svelte

import WrappedComponent, { thisComponentHeader } from './WrappedComponent.svelte'
...
<Accord header={$thisComponentHeader}>
  <WrappedComponent />
</Accord>

仍然有一个变量，但它被存放在导入定义中。

这样做的一个目的是防止组件的实例超过1个。