如何将props批量传递给嵌套组件的所有子组件，无需手动逐个传入？

嘿，这个需求太常见了！你不想手动给每个子组件传variable prop，本质上就是要实现跨层级的属性透传，不用逐层手动传递，不同前端框架都有现成的解决方案，我给你分情况详细说：

这是React官方提供的跨层级数据传递方案，完美解决你的问题：

• 第一步：创建一个Context实例

import { createContext, useContext } from 'react';

// 可以设置默认值，避免没有Provider时出现报错
const VariableContext = createContext(null);

• 第二步：改造Parent组件，用Provider包裹子组件并传递值

function Parent({ variable, children }) {
  return (
    <VariableContext.Provider value={variable}>
      {children}
    </VariableContext.Provider>
  );
}

• 第三步：在Child1/Child2中使用useContext获取值

function Child1() {
  const variable = useContext(VariableContext);
  // 现在就能直接使用variable了
  return <div>Child1 拿到的变量：{variable}</div>;
}

function Child2() {
  const variable = useContext(VariableContext);
  return <div>Child2 拿到的变量：{variable}</div>;
}

• 最终使用方式就是你想要的样子：

<Parent variable="myVariable">
  <Child1 />
  <Child2 />
</Parent>

Vue的provide和inject是专门用来做跨层级数据传递的API，不管是Vue2还是Vue3都能用：

Vue3 组合式API写法 #

• Parent组件提供数据：

<template>
  <div class="parent">
    <slot></slot>
  </div>
</template>

<script setup>
import { provide } from 'vue';

// 定义父组件的props
const props = defineProps(['variable']);
// 把variable提供给所有子组件（不管层级多深）
provide('globalVariable', props.variable);
</script>

• Child1/Child2注入数据：

<template>
  <div>Child1 拿到的变量：{{ globalVariable }}</div>
</template>

<script setup>
import { inject } from 'vue';

// 注入父组件提供的数据，第二个参数是可选默认值
const globalVariable = inject('globalVariable', '默认值');
</script>

Vue2 选项式API写法 #

• Parent组件：

<template>
  <div class="parent">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: ['variable'],
  provide() {
    return {
      globalVariable: this.variable
    };
  }
};
</script>

• Child组件：

<template>
  <div>Child2 拿到的变量：{{ globalVariable }}</div>
</template>

<script>
export default {
  inject: ['globalVariable']
};
</script>

• 最终使用方式：

<Parent variable="myVariable">
  <Child1 />
  <Child2 />
</Parent>

• 如果只是简单的父子组件传递，props其实足够，但如果嵌套层级深（比如父组件→子组件→孙组件），用上面的方案能省掉很多重复代码。
• React中如果variable频繁变化，可能会导致所有消费Context的组件重渲染，可以结合useMemo或者拆分Context来优化性能。
• Vue中如果传递的是响应式数据（比如ref/reactive对象），inject拿到的也会是响应式的；如果是基础类型（字符串、数字），Vue3中建议用ref包裹来保持响应式，Vue2中可以把基础类型放在对象里传递。

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