Vue 2中如何让父组件数据可被多层嵌套插槽的props访问？

针对Vue中多层插槽无法直接访问上层插槽作用域的问题，有两种常用的可行方案：

方案1：作用域插槽逐层透传 #

这是符合原生插槽设计逻辑的常规方案，中间层组件将上层传入的插槽参数绑定到自身插槽对外暴露即可。

• 优势：数据流清晰透明，参数和插槽内容强关联，无额外隐式依赖
• 劣势：嵌套层级过深时会产生少量冗余的透传代码

代码示例 #

首先在中间层child组件中接收上层参数并透传到自身插槽：

<!-- Child 组件内部代码 -->
<template>
  <div class="child">
    <!-- 子组件自有逻辑 -->
    <!-- 将上层传入的foo、bar透传到自己的content插槽，多参数可直接用v-bind="$props"批量透传 -->
    <slot name="content" :foo="foo" :bar="bar"></slot>
  </div>
</template>
<script>
export default {
  props: ['foo', 'bar', 'someprop']
}
</script>

父组件使用时直接接收透传的参数即可：

<parent>
  <template v-slot:content="{foo, bar}">
       <child :v-text="foo" :foo="foo" :bar="bar" :someprop="bar === 'BAR'">
            <!-- 接收child插槽透传的foo、bar -->
            <template v-slot:content="{foo, bar}">
                <grandchild :v-text="foo" :someprop="bar === 'BAR'"></grandchild>
            </template>
       </child>
  </template>
</parent>

方案2：provide/inject 跨层传递 #

适合嵌套层级深、不需要中间层感知参数的场景，无需逐层透传即可直接将数据传递到任意后代组件。

• 优势：无中间层透传成本，支持任意层级的后代访问
• 劣势：数据来源不直观，上层提供方和后代组件存在隐式耦合

代码示例 #

首先在最上层parent组件提供共享数据：

<!-- Parent 组件内部代码 -->
<script>
export default {
  data() {
    return {
      foo: 'FOO',
      bar: 'BAR'
    }
  },
  provide() {
    return {
      // Vue3中如果需要响应式可以直接传递ref/reactive对象
      sharedSlotContext: {
        foo: this.foo,
        bar: this.bar
      }
    }
  }
}
</script>

任意层级的后代组件直接注入即可使用，不需要通过插槽作用域获取：

<!-- Grandchild 组件内部代码 -->
<script>
export default {
  inject: ['sharedSlotContext'],
  computed: {
    foo() {
      return this.sharedSlotContext.foo
    },
    bar() {
      return this.sharedSlotContext.bar
    }
  }
}
</script>
<template>
  <div :someprop="bar === 'BAR'">{{ foo }}</div>
</template>

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