如何从子级向上传递数据到任意数量的父级并每次更改它

Question

如何将数据从最里面的子组件向上传递到任意数量的不同父组件，让每个父组件一直修改数据，直到最外面的父组件渲染它？ 例如，假设我有一些在 vanilla js 中使用的数学实用程序，例如

initial(num: number)

、

add(amount: number, num: number)

和

subtract(amount: number, num: number)

，例如：

const total = add( 2, subtract( 4, initial(10) ) )
console.log(total) // logs: 8 ie: 10 - 4 + 2 

如何创建组件以声明性方式使用这些组件，例如：

<Add amount={2}>
  <Subtract amount={4}>
    <Initial num={10} />
  </Subtract>
</Add>

这会输出类似：

<span>8</span>

我希望能够在不同的“修改器”组件之间使用任意数量的嵌套，所有这些组件都嵌套在初始“数据设置”组件周围。请参阅带有普通 JS 实现的 REPL：https://svelte.dev/repl/30ce69a25f1b46269e0a9918c84f36aa?version=4.2.0

我尝试过使用上下文，但无法完全发挥作用。

Answer 1

这是一个非常有趣的问题。

这个 REPL 展示了如何使用 Svelte 的数据绑定来完成此任务。

这个想法是将所需的输入和计算的输出公开为 props，然后对整个事物进行数据绑定。这无论如何都不容易，但确实能完成工作。

您会注意到它的名称中有“V2”。我的“V1”尝试利用老虎机道具。它也能工作，但比较冗长，我什至需要

tick()

功能来同步事物。