如何通过ScrollableComponent父组件设置b-table的items属性？

方法一：用作用域插槽正确传递数据 #

这是最直接的嵌套组件传值方式，先修正ScrollableComponent的实现：

<!-- ScrollableComponent.vue -->
<template>
  <div ref="scrollable-div" @scroll.passive="onScroll" @scrollend="onScroll">
    <!-- 直接暴露items，不用加this. -->
    <slot :items="items"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 这里放你要传给表格的数据源
      items: [/* 你的数据数组 */]
    }
  },
  methods: {
    onScroll() {
      // 你的滚动逻辑代码
    }
  }
}
</script>

接着在父组件里，通过作用域插槽语法接收传递的items，再绑定给b-table：

<!-- 父组件代码 -->
<ScrollableComponent ref="scrollTable" class="tableDiv">
  <!-- 用v-slot接收插槽传出的props -->
  <template v-slot="{ items }">
    <b-table 
      hover 
      bordered 
      no-border-collapse 
      show-empty 
      :items="items"
    ></b-table>
  </template>
</ScrollableComponent>

为啥之前的方案没生效？ #

你之前的写法有两个核心问题：

• 插槽传props时不需要加this.，直接写数据属性名就行
• 父组件没使用作用域插槽的语法接收数据，导致b-table拿不到ScrollableComponent传递的items

方法二：用provide/inject（适合深层组件场景） #

如果你的组件层级比较深，不想用插槽的话，可以用这个方式：

在ScrollableComponent中提供数据： #

<script>
export default {
  provide() {
    return {
      tableItems: this.items
    }
  },
  data() {
    return {
      items: [/* 你的数据 */]
    }
  }
}
</script>

在b-table所在组件中注入数据： #

<script>
export default {
  inject: ['tableItems']
}
</script>

<template>
  <b-table 
    hover 
    bordered 
    no-border-collapse 
    show-empty 
    :items="tableItems"
  ></b-table>
</template>

不过如果只是直接嵌套的组件关系，作用域插槽的可读性和维护性会更好。

内容的提问来源于stack exchange，提问作者M.Naszko