Vue3中如何无需Pinia/Vuex实现祖孙组件Props传递？

当组件嵌套层级较深时，逐层传递Props的"Props drilling"问题会导致代码冗余且维护性差，以下是两种无需状态管理库的优雅解决方案：

1. 使用Provide/Inject依赖注入（官方推荐） #

Vue3的Provide/Inject API专门用于解决跨层级组件间的状态共享问题，允许父组件向所有后代组件提供数据，后代组件无需关心中间层级，直接注入使用。

组合式API实现示例： #

• 父组件（Parent.vue）：

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

// 定义响应式状态
const isActive = ref(true)
// 提供状态给后代组件，第一个参数是注入键，第二个是响应式对象
provide('isActive', isActive)
</script>

<template>
  <div>
    <button @click="isActive = !isActive">切换激活状态</button>
    <Child />
  </div>
</template>

• 中间子组件（Child.vue）：
  无需任何额外处理，直接渲染孙组件即可，中间层完全不需要感知isActive的存在：

<script setup>
import SecondChild from './SecondChild.vue'
</script>

<template>
  <div>
    <SecondChild />
  </div>
</template>

• 孙组件（SecondChild.vue）：
  通过inject获取父组件提供的状态：

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

// 注入对应键的状态，可设置默认值（可选）
const isActive = inject('isActive', ref(false))
</script>

<template>
  <div>孙组件当前状态：{{ isActive ? '已激活' : '未激活' }}</div>
</template>

选项式API实现示例： #

• 父组件：

<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      isActive: true
    }
  },
  provide() {
    // 传递响应式状态需包裹在函数中，确保后代拿到的是最新值
    return {
      isActive: () => this.isActive
    }
  }
}
</script>

• 孙组件：

<script>
export default {
  inject: ['isActive'],
  computed: {
    currentActive() {
      return this.isActive()
    }
  }
}
</script>

注意：若要保持响应式，父组件必须传递ref/reactive对象（组合式API），或通过函数返回状态（选项式API），否则后代组件无法感知状态更新。

2. 使用$attrs属性透传 #

如果只是需要透传少数属性，可利用Vue的$attrs特性，中间组件无需定义Props，直接将接收到的所有非Props属性透传给下一级组件。

实现示例： #

• 父组件（Parent.vue）：
  直接给子组件传递属性：

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const isActive = ref(true)
</script>

<template>
  <div>
    <button @click="isActive = !isActive">切换状态</button>
    <Child :isActive="isActive" />
  </div>
</template>

• 中间子组件（Child.vue）：
  通过v-bind="$attrs"将所有未定义为Props的属性透传给孙组件：

<script setup>
import SecondChild from './SecondChild.vue'
// 这里不要定义isActive为Props，否则$attrs中不会包含该属性
</script>

<template>
  <div>
    <SecondChild v-bind="$attrs" />
  </div>
</template>

• 孙组件（SecondChild.vue）：
  正常通过defineProps接收属性：

<script setup>
const props = defineProps({
  isActive: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <div>孙组件当前状态：{{ props.isActive ? '已激活' : '未激活' }}</div>
</template>

适用场景：适合透传原生HTML属性（如class、style）或少量组件属性，层级不多的情况；若层级超过3-4层，Provide/Inject会更简洁。

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