Vue 3如何直接向多层嵌套组件传递Props？是否有类Svelte Context的API？

核心方案：Vue 3 的 Provide/Inject API #

Vue 3 自带的 Provide/Inject API，就是你要找的类似 Svelte Context 的功能——专门解决多层嵌套组件的跨层级数据传递问题，不用逐层传 props，也不需要依赖状态管理库。

步骤1：在 Todo.vue 中提供数据 #

在需要向外暴露数据的父组件（Todo.vue）里，用 provide() 函数把数据"抛"出去：

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

// 可以是普通对象、响应式变量甚至方法
const todoConfig = {
  label: '新增待办',
  inputMaxLength: 30
}

// 第一个参数是唯一标识键，第二个是要传递的数据
provide('todoContext', todoConfig)
</script>

如果要传响应式数据，直接丢 ref/reactive 对象就行，子组件拿到后会自动跟着变化：

<script setup>
import { provide, ref } from 'vue'

const currentTodo = ref('')
provide('reactiveTodo', currentTodo)
</script>

步骤2：在 Field.vue 中注入数据 #

在深层子组件（Field.vue）里，用 inject() 函数"接"到上层提供的数据：

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

// 通过对应键获取，第二个参数是可选的默认值
const todoContext = inject('todoContext', { label: '默认标签', inputMaxLength: 20 })
const reactiveTodo = inject('reactiveTodo')
</script>

<template>
  <div>
    <label>{{ todoContext.label }}</label>
    <input :maxlength="todoContext.inputMaxLength" v-model="reactiveTodo">
  </div>
</template>

复杂嵌套场景的扩展用法 #

1. TypeScript 类型安全 #

如果用 TS，可以给 Provide/Inject 定义类型，避免键名或数据类型出错：

// 先定义类型接口
interface TodoContext {
  label: string
  inputMaxLength: number
}

// Todo.vue 提供数据时指定类型
provide<TodoContext>('todoContext', { label: '新增待办', inputMaxLength: 30 })

// Field.vue 注入时指定类型
const todoContext = inject<TodoContext>('todoContext', { label: '默认', inputMaxLength: 20 })

2. 传递方法实现双向通信 #

除了数据，还能把方法提供给子组件，让子组件可以主动通知上层组件：

// Todo.vue
<script setup>
import { provide, ref } from 'vue'

const todoList = ref([])
const addTodo = (newTodo: string) => {
  todoList.value.push(newTodo)
}

// 把方法传递出去
provide('todoActions', { addTodo })
</script>

// Field.vue
<script setup>
import { inject, ref } from 'vue'

const { addTodo } = inject('todoActions')
const inputVal = ref('')
</script>

<template>
  <div>
    <input v-model="inputVal">
    <button @click="addTodo(inputVal)">添加</button>
  </div>
</template>

3. 限定作用域 #

如果不想让全局组件都能拿到数据，只需要把 provide 写在特定组件的 setup 里，只有该组件的后代能注入对应数据，避免污染全局上下文。

对比逐层传 props 的优势 #

• 中间组件（比如 Popup.vue）不用再冗余声明和传递无关 props，代码更干净
• 响应式数据自动同步，上层数据变了，所有注入的子组件会自动更新
• 不管嵌套多少层都能用，扩展性拉满

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