将范围模板从父组件传递到vue.js中的子组件

Question

我正在使用 bootstrap-vue.js 来创建表格。为了减少整个项目的冗余，我试图创建一个名为 CommonTable.vue 的包装器组件，其代码如下：

<template>
  <div>
    <div class="table-responsive">
      <b-table
        :class=classname
        :items=items
        :fields=fields
        :current-page=currentPage
        :per-page=perPage
        :show-empty="true"
      >
        <!-- Custom formatted header cells -->
        <template scope="data" :slot="'HEAD_'+headData.fieldName" v-for="headData in tableHeaderData">
          <b-popover triggers="hover" placement="bottom" :content="headData.tooltip">
            {{data.label}}
          </b-popover>
        </template>

        <!-- Custom formatted value cells -->
        <template slot="uptime" scope="item">
          <small>{{item.value}}</small>
        </template>
      </b-table>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TableComponent',
    props: ["items", "fields", "classname", "tableHeaderData"],
    data(){
      return {
        currentPage: 1,
        perPage: 35
      };
    }
  };
</script>

然后我尝试在任何地方重新使用这个组件，我想添加一个表并通过如下的道具传递数据和字段信息（ Listing.vue ）：

<template>
  <div class="row">
        <div class="col-sm-12">
              <CommonTable
                    classname='no-margin'
                    :items="items"
                    :fields="fields"
                    :showPagination="showPagination"
                    :tableHeaderData="tableHeaderData"
              >
              </CommonTable>
        </div>
  </div>
</template>

<script>
  import CommonTable from '@/components/CommonTable';

  export default {
        name: 'Listing',
        components: {
              'CommonTable': CommonTable
        },
        data() {
              return {
                    tableHeaderData:[
                          {fieldName: "name", tooltip: "User name."},
                          {fieldName: "uptime", tooltip: "Uptime."}
                    ],
                    fields: {
                          name: {label: 'User Name'},
                          uptime: {label: 'Uptime'}
                    },
                    items: [
                          {"name": "Alex", "uptime": "12d 4h 29m 13s"},
                          {"name": "Bob", "uptime": "21d 4h 29m 13s"}
                    ],
                    showPagination: false
              };
        }
  };
</script>

这很好但不是100％通用的。在CommonTable.vue中可见，我动态生成自定义格式化的标题单元格，但不对自定义格式化的值单元格执行相同操作。

我想要做的是从父组件（Listing.vue）传递自定义格式化的标头模板，并在运行时将其编译为CommonTable.vue，以实现完全动态

我尝试使用“插槽”概念，但失败了，我没有其他线索来实现我的愿望。有人可以提供一个提示，使该部分通用/动态。提前谢谢。