Javascript 在vue.js中将作用域模板从父组件传递到子组件

我正在使用引导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>

{{data.label}
{{item.value}}
导出默认值{
名称：“TableComponent”，
道具：[“项目”、“字段”、“类名”、“tableHeaderData”]，
数据（）{
返回{
当前页面：1，
每页：35
};
}
};

然后，我尝试在任何我想添加表的地方重用该组件，并通过以下支柱（Listing.vue）传递数据和字段信息：

从“@/components/CommonTable”导入CommonTable；
导出默认值{
名称：'列表'，
组成部分：{
“CommonTable”：CommonTable
},
数据（）{
返回{
tableHeaderData：[
{fieldName:“名称”，工具提示：“用户名”。}，
{字段名：“正常运行时间”，工具提示：“正常运行时间”。}
],
字段：{
名称：{标签：'用户名'}，
正常运行时间：{标签：“正常运行时间”}
},
项目：[
{“名称”：“Alex”，“正常运行时间”：“12d 4h 29m 13s”}，
{“名称”：“鲍勃”，“正常运行时间”：“21d 4h 29m 13s”}
],
显示分页：false
};
}
};

这很好，但不是100%通用。正如CommonTable.vue中所示，我正在动态生成自定义格式的标题单元格，但不会对自定义格式的值单元格执行相同的操作。

我要做的是从父组件（Listing.vue）传递自定义格式的头模板，并在运行时将其编译成CommonTable.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>