Question

我有一个简单的REPL example用于简单的列表详细信息编辑器。它由三个部分组成：

Annotation是细节
Annotations遍历数据并创建Annotation实例
App是创建Annotations

我已经弄清楚了如何连接自定义Svelte存储以管理Array的{{1}}实例数据。我可以通过将商店直接导入到Annotations组件中并调用它而无需顶层Annotations组件的任何支持来使用它。但是，我希望能够将商店作为App父级（即Annotations而非App的{{1}}组件上的属性来传递。

这可能吗？我认为从父组件注入商店比从组件本身导入商店更灵活/更具测试性。我在Java中用Spring做过太多的依赖注入，并且在考虑Svelte模型时有误吗？

Answer 1

是的，绝对如此。只需对your REPL进行一些修改，就可以轻松证明这一点。

在App.svelte中，如您所说：

<Annotations items={annotations} />

在Annotations.svelte中，添加items道具，并用它替换annotations的引用：

<script>
  export let items = []
  ...
  items.addStuff(...);
</script>

{#each $items as annotation}
  ...
{/each}

根本没有收获……您可以将想要的任何类型的值传递为组件道具，没有编组之类的东西。

如果您愿意的话，甚至可以通过其他组件！

<script>
  export let Cmp // yes, can change at runtime, reactive!
</script>

<svelte:component this={Cmp} />

<!-- or -->

{#if Cmp}
  <Cmp />
{/if}

但是我离题了，对不起！因此，这是可能的。现在，这是个好主意吗？我认为您在Spring和依赖项注入方面的经验完全可以转移到这里。实际上，它将以更多样板为代价，使您的组件更灵活，更可测试。在某些情况下，这种折衷是好的，在某些情况下是不好的。

我个人认为，这种模式通常弊大于利。

要考虑的一件事是，当您将商店直接导入到组件中时，会使其在数据方面成为单例。即使您可以在屏幕上呈现组件的多个实例，它们也都必须使用完全相同的数据。另一方面，当存储通过prop传递时，您可以将同一组件用于不同的存储（显然）。您甚至可以在运行时交换组件使用的存储，而无需重新创建组件！因此，就像您说的那样，更加灵活。

此做法引起的一个问题是，您必须确定要导入商店的位置。哪些成分将负责拥有商店，而不仅仅是消耗它们？您可以通过道具手动将商店下达多少级？用React的话来说，我们可能会说“笨拙的组件”与“容器”。这里有一个真正的问题（和辩论），不是Svelte特有的，并且根据您问的人或项目的类型而得到不同的答案。

要考虑的另一种选择是，您可以将商店放入context中，因此您不必将它们传递给整个组件层次结构。另一方面，即使良好的命名和一致的模式确实可以缓解此问题，数据流也变得更难以跟踪。

您可以考虑的另一种方法是拥有商店...

总而言之，对于Svelte所做的事情，您并没有太多的限制，它必须明确声明其原语（属性，属性，上下文...）。这样一来，您就可以想象或重用其他框架中的技术，就成本和收益而言，它们的结果大致相同。

Answer 2

似乎可以正常工作...

在 App.svelte
中更改：
<Annotations
到
<Annotations annotations={annotations}/>

在 Annotations.svelte
中删除：
import { annotations } from './state.js';
添加：
export let annotations = [];

REPL
那是你要找的吗？

是否可以将Svelte商店作为组件的属性传递？

2 个答案: