Vue中如何让默认插槽内子组件自动获取父组件props值

这个需求完全可以实现，Vue 原生的 provide/inject API 是最适配这个场景的方案，不需要修改现有插槽写法，也不用逐个给子组件绑定属性，实现成本极低。

核心实现逻辑 #

provide/inject 本身就是为跨层级组件传值设计的：父组件可以向所有后代组件（不管嵌套多少层、是不是通过插槽渲染）注入依赖值，后代组件可以直接接收，不需要逐层传递props。

第一步：在BaseTable中提供全局variant #

修改BaseTable组件，把接收到的variant属性作为依赖提供给所有后代组件，注意要传响应式的计算属性，保证外层variant修改时所有子组件能同步更新：

<!-- BaseTable.vue （Vue3 写法示例，Vue2逻辑一致） -->
<script setup>
import { provide, computed } from 'vue'
const props = defineProps({
  variant: {
    type: String,
    default: 'default'
  },
  columns: Array
})

// 向所有后代组件提供响应式的表格variant
provide('tableVariant', computed(() => props.variant))
</script>

<template>
  <table :class="`base-table--${props.variant}`">
    <slot />
  </table>
</template>

第二步：在子组件中接收注入值 #

修改BaseTableRow、BaseTableCell组件，通过inject拿到上层表格注入的variant即可，同时保留手动传variant prop的能力，支持单独覆盖某一行/单元格的样式：

<!-- BaseTableCell.vue 示例 -->
<script setup>
import { inject, computed } from 'vue'
const props = defineProps({
  variant: {
    type: String,
    default: null // 默认为null，代表使用表格全局配置
  },
  alignment: String
})

// 注入表格全局variant，兜底默认值为default
const tableVariant = inject('tableVariant', 'default')
// 取值优先级：组件单独传入的variant > 表格全局注入的variant
const finalVariant = computed(() => props.variant ?? tableVariant.value)
</script>

<template>
  <td 
    :class="[
      `base-table-cell--${finalVariant}`,
      { 'text-align-right': alignment === 'right' }
    ]"
  >
    <slot />
  </td>
</template>

BaseTableRow的接收逻辑和上面完全一致，不需要额外处理插槽内容。

方案优势 #

• 调用组件时只需要给最外层BaseTable传一次variant属性即可，插槽内的行、单元格不需要重复绑定属性，修改全局样式时只改一处就生效
• 保留自定义灵活性：如果某一行/单元格需要特殊样式，单独给对应组件传variant prop就会覆盖全局配置，不会被强制统一
• 没有hack逻辑，完全基于Vue原生能力实现，没有额外性能开销，也不会因为插槽加了包裹标签导致逻辑失效

你之前查到的插槽props方案属于作用域插槽的能力，确实需要在使用插槽时手动解构值再逐个绑定，没法减少重复编码，不适合这个场景。

不推荐的备选方案 #

你也可以通过渲染函数拦截插槽的VNode，给直接子组件强行绑定variant属性，但这个方案只能处理直接子节点，一旦插槽里加了<template>、<div>这类包裹层，或者组件嵌套层级变深就会失效，维护成本很高，不建议使用。

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