Vue2中如何解决插槽子组件无法获取父组件block数据的问题？

1. 确保父组件存在响应式的block数据 #

先检查带<slot>的父组件是否已定义block，需在data或props中声明响应式数据：

<template>
  <div class="grid-container">
    <div class="container">
      <div class="row justify-content-starts">
        <slot :block="block"></slot>                
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 替换为你的实际业务数据
      block: { id: 1, content: '测试内容' }
    }
  }
}
</script>

2. 在父组件的调用处接收插槽数据并传递给子组件 #

Vue2的作用域插槽逻辑需写在父组件的调用位置，而非子组件内部：

写法1（Vue2.6+ 推荐用v-slot） #

<!-- 示例：在App.vue中调用父组件 -->
<template>
  <div id="app">
    <GridContainer>
      <!-- 用v-slot接收插槽传递的block -->
      <template v-slot="{ block }">
        <!-- 将接收的block作为props传给子组件 -->
        <ChildComponent :block="block" />
      </template>
    </GridContainer>
  </div>
</template>

<script>
import GridContainer from './components/GridContainer.vue'
import ChildComponent from './components/ChildComponent.vue'

export default {
  components: { GridContainer, ChildComponent }
}
</script>

写法2（Vue2.6之前版本用slot-scope） #

<template>
  <div id="app">
    <GridContainer>
      <template slot-scope="{ block }">
        <ChildComponent :block="block" />
      </template>
    </GridContainer>
  </div>
</template>

3. 子组件通过props接收数据 #

子组件需声明block作为props才能正常访问：

<template>
  <div>
    <p>Block: {{ block }}</p>
  </div>
</template>

<script>
export default {
  props: {
    block: {
      type: Object, // 根据你的数据类型调整
      required: true
    }
  }
}
</script>

错误原因说明 #

你之前的写法是Vue3的作用域插槽语法（直接在子组件template上用v-slot），但Vue2中作用域插槽的接收逻辑必须放在父组件的调用位置，通过v-slot或slot-scope获取插槽传递的数据后，再传递给子组件。同时要确保父组件自身存在block这个响应式数据，否则也会导致传递失败。

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