如何实现最内层子组件跨任意多层父组件向上传值并逐层修改

如何将数据从最内层子组件向上传递，经过任意数量的不同父组件，让每个父组件依次修改数据，直至最外层父组件完成渲染？

举个例子，现有以下数学工具函数：

• initial(num: number)：返回初始数值
• add(amount: number, num: number)：将传入的数值加上指定数量
• subtract(amount: number, num: number)：将传入的数值减去指定数量

原生JS中调用方式如下：

const total = add(2, subtract(4, initial(10)))
console.log(total) // 输出: 8，计算逻辑：10 - 4 + 2

现在想通过声明式的组件嵌套来实现相同逻辑，示例写法如下：

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

最终组件需要输出类似 <span>8</span> 的结果，且要支持任意数量的不同“修改器”组件嵌套在初始数据组件外层。我尝试用上下文（context）实现，但没成功。

要实现这种嵌套组件逐层修改数据并向上传递的效果，核心思路是让内层组件提供初始值，外层组件接收内层的值并执行修改逻辑，最终由最外层组件触发完整计算并渲染结果。在Svelte中可以通过组件插槽（slot）与上下文（context）结合实现，具体步骤如下：

1. 定义上下文标识 #

先创建一个全局唯一的上下文键，用于在组件树中传递值处理逻辑：

// math-context.js
export const MATH_CONTEXT = Symbol('math-context')

2. 实现初始值组件 <Initial> #

该组件负责提供初始数值，并通过上下文获取外层传递的处理逻辑，完成最终计算后渲染结果：

<!-- Initial.svelte -->
<script>
  import { getContext } from 'svelte'
  import { MATH_CONTEXT } from './math-context.js'

  export let num

  // 若外层没有传递处理逻辑，则直接返回初始值
  const processValue = getContext(MATH_CONTEXT) ?? (value => value)
  const finalValue = processValue(num)
</script>

<span>{finalValue}</span>

3. 实现修改器组件（以 <Add> 和 <Subtract> 为例） #

修改器组件需要先获取外层的处理逻辑，再定义自身的数值修改规则，最后将组合后的逻辑通过上下文传递给内层组件：

<!-- Add.svelte -->
<script>
  import { setContext, getContext } from 'svelte'
  import { MATH_CONTEXT } from './math-context.js'

  export let amount

  // 获取外层组件的处理逻辑，默认返回原值
  const parentProcess = getContext(MATH_CONTEXT) ?? (value => value)

  // 定义当前组件的处理逻辑：先执行加法，再交给外层处理
  function processValue(value) {
    return parentProcess(value + amount)
  }

  // 将当前处理逻辑注入上下文，供内层组件使用
  setContext(MATH_CONTEXT, processValue)
</script>

<slot />

<!-- Subtract.svelte -->
<script>
  import { setContext, getContext } from 'svelte'
  import { MATH_CONTEXT } from './math-context.js'

  export let amount

  const parentProcess = getContext(MATH_CONTEXT) ?? (value => value)

  // 定义减法处理逻辑
  function processValue(value) {
    return parentProcess(value - amount)
  }

  setContext(MATH_CONTEXT, processValue)
</script>

<slot />

4. 嵌套使用组件 #

现在就可以按照需求自由嵌套组件，实现任意顺序的数值修改：

<!-- App.svelte -->
<script>
  import Add from './Add.svelte'
  import Subtract from './Subtract.svelte'
  import Initial from './Initial.svelte'
</script>

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

工作逻辑说明 #

1. 组件渲染时从外到内依次执行：最外层的<Add>先将自身的加法处理逻辑注入上下文，再渲染插槽内的<Subtract>；
2. <Subtract>获取外层的加法逻辑，将自身减法逻辑与外层逻辑组合后，再次注入上下文，渲染插槽内的<Initial>；
3. <Initial>获取最终的组合处理逻辑，传入初始值后，会依次触发减法、加法计算，最终得到结果并渲染。

这种模式支持任意数量的修改器组件嵌套，新增修改器只需遵循“获取外层逻辑→定义自身规则→注入上下文”的逻辑即可。

内容的提问来源于stack exchange，提问作者tsdexter