如何让组件的currentData属性对其插槽元素可用？

首先得理清核心问题：你现在的插槽内容是在父组件（Childs）的作用域里解析的，而不是子组件（Child）的作用域，所以哪怕你在Childs里给Child的currentData赋值了，插槽里的代码也访问不到这个数据。下面给你几个实用的解决方案，按推荐程度排序：

1. 用「Props + 作用域插槽」（最推荐，符合Vue数据流规范） #

Vue推荐单向数据流，父组件通过props传递数据给子组件是最标准的做法，再配合作用域插槽把子组件的数据传给插槽内容：

第一步：修改Child.vue，把currentData改成props，并通过作用域插槽传递 #

<template>
  <div>
    <!-- 把currentData作为插槽prop传递出去 -->
    <slot :currentData="currentData"></slot>
  </div>
</template>

<script>
export default {
  props: {
    currentData: {
      type: Array, // 根据你的实际数据类型调整，比如对象就写Object
      default: () => [] // 给个默认值避免报错
    }
  }
}
</script>

第二步：在Childs.vue里通过props传值，并用作用域插槽接收数据 #

<template>
  <childs>
    <child :currentData="parentData">
      <!-- Vue 2.6+用v-slot接收插槽prop，旧版本用slot-scope -->
      <template v-slot:default="{ currentData }">
        <ul>
          <li v-for="item in currentData" :key="item.name">{{ item.name }}</li>
        </ul>
      </template>
    </child>
  </childs>
</template>

<script>
export default {
  data() {
    return {
      parentData: []
    }
  },
  mounted() {
    // 这里直接修改父组件的数据，自动通过props传给子组件
    this.parentData = [{ name: "Item 1" }, { name: "Item 2" }];
  }
}
</script>

这种方式不仅解决了插槽访问数据的问题，还遵循了Vue的响应式规则，代码更易维护。

2. 仅用作用域插槽（不修改数据流方式） #

如果你暂时不想把currentData改成props，只想让插槽能访问到Child组件里的currentData，那可以直接给Child组件添加作用域插槽：

修改Child.vue，添加作用域插槽 #

<template>
  <div>
    <slot :currentData="currentData"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentData: {}
    }
  }
}
</script>

在Childs.vue里接收插槽prop #

<template>
  <childs>
    <child ref="child">
      <template v-slot="{ currentData }">
        <ul>
          <li v-for="item in currentData" :key="item.name">{{ item.name }}</li>
        </ul>
      </template>
    </child>
  </childs>
</template>

<script>
export default {
  mounted() {
    // 这里还是直接给子组件实例赋值（不推荐，但能生效）
    this.$refs.child.currentData = [{ name: "Item 1" }, { name: "Item 2" }];
  }
}
</script>

注意：直接修改子组件的data属性不符合Vue的单向数据流规范，后期维护容易出问题，尽量少用。

3. 用Provide/Inject（适合深层组件嵌套场景） #

如果Childs和Child之间还有多层组件，不想用props层层传递数据，可以用provide/inject：

在Childs.vue里提供数据 #

<script>
export default {
  data() {
    return {
      currentData: []
    }
  },
  provide() {
    // 提供响应式的数据
    return {
      currentData: this.currentData
    }
  },
  mounted() {
    this.currentData = [{ name: "Item 1" }, { name: "Item 2" }];
  }
}
</script>

在Child.vue里注入数据并传给插槽 #

<template>
  <div>
    <slot :currentData="currentData"></slot>
  </div>
</template>

<script>
export default {
  inject: ["currentData"]
}
</script>

插槽里同样用作用域插槽接收 #

和前面的写法一样，在Childs.vue的插槽里用v-slot接收currentData即可。

总结一下：优先用方案1，它是Vue官方推荐的做法，代码更规范；如果有特殊场景限制，再考虑方案2或3。

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