VueJS 2中如何将模板（插槽）从祖父组件传递至孙组件？

咱们都知道，Vue2里插槽默认只能在直接的父-子组件间传递，要让祖父组件的模板/插槽落到孙组件（也就是Bootstrap Vue的<b-table>）手里，得靠中间子组件做“中转”。结合Bootstrap Vue的组件特性，咱们可以这么一步步实现：

1. 让中间子组件做插槽转发器 #

中间组件的核心任务，就是把祖父传来的插槽原封不动（连带着<b-table>的作用域数据）转发给内部的<b-table>。这里要用到作用域插槽，因为<b-table>的列插槽（比如cell(列名)这类）会传递当前行的item等数据。

举个中间组件的例子，命名为MyTableWrapper：

<template>
  <b-table :items="items" :fields="fields">
    <!-- 遍历并转发所有来自祖父的作用域插槽 -->
    <template v-for="(_, slotName) in $scopedSlots" #[slotName]="scope">
      <slot :name="slotName" v-bind="scope"></slot>
    </template>
  </b-table>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    },
    fields: {
      type: Array,
      required: true
    }
  }
}
</script>

如果你只需要转发特定几个插槽，不用遍历所有$scopedSlots，直接指定插槽名更精准，比如：

<template #cell(actions)="scope">
  <slot name="cell(actions)" v-bind="scope"></slot>
</template>

2. 祖父组件直接使用插槽传递模板 #

这一步就跟你直接用<b-table>一样简单，定义好列的插槽就行，这些插槽会自动通过中间组件流转到<b-table>里：

<template>
  <MyTableWrapper :items="tableItems" :fields="tableFields">
    <!-- 自定义操作列的模板 -->
    <template #cell(actions)="{ item }">
      <b-button @click="viewDetail(item)" size="sm">查看</b-button>
      <b-button @click="editItem(item)" variant="warning" size="sm">编辑</b-button>
    </template>

    <!-- 自定义名称列的显示样式 -->
    <template #cell(name)="{ item }">
      <span class="text-primary font-weight-bold">{{ item.name }}</span>
    </template>
  </MyTableWrapper>
</template>

<script>
import MyTableWrapper from './MyTableWrapper.vue'

export default {
  components: { MyTableWrapper },
  data() {
    return {
      tableFields: ['name', 'age', 'actions'],
      tableItems: [
        { name: '张三', age: 26 },
        { name: '李四', age: 32 }
      ]
    }
  },
  methods: {
    viewDetail(item) {
      console.log('查看详情:', item)
    },
    editItem(item) {
      console.log('编辑条目:', item)
    }
  }
}
</script>

关键点提醒 #

• 中间组件别忘了把<b-table>需要的核心Props（比如items、fields）从祖父组件接收过来，再传递给<b-table>，不然表格没法正常渲染。
• 这种转发方式完全符合Bootstrap Vue的插槽规范，不会出现兼容性问题。

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