vue.js - Vue - 如何动态传递和使用多个组件作为道具

Question

我使用 AgGrid 作为网格来显示站点中的数据。

按照这个例子Example: Rendering using VueJS Components，我可以使用不同的组件来渲染到不同的列中。

现在我需要在多个视图中实现这个网格，我想制作一个实现 ag-grid-vue 组件的“自定义组件”，并且只接收列定义、行数据和组件（如果列正在呈现另一个组件）。

像这样的东西：

<template>
  <div>
    <ag-grid-vue
      :animateRows="true"
      :columnDefs="columnDefs"
      :frameworkComponents="frameworkComponents"
      :defaultColDef="defaultColDef"
      :gridOptions="gridOptions"
      :pagination="true"
      :paginationPageSize="paginationPageSize"
      :rowData="rowData"
      :suppressPaginationPanel="true"
      colResizeDefault="shift"
      ref="agGridTable"
      rowSelection="multiple"
    ></ag-grid-vue>
  </div>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";

export default {
  name: "AgGrid",
  components: { AgGridVue },
  props: ['columnDefs', 'components', 'rowData'],
  data() {
    return {
      gridApi: null,
      gridOptions: {},
      defaultColDef: {
        sortable: true,
        resizable: true,
        suppressMenu: true
      },
      frameworkComponents: null
    }
  },
  beforeMount() {
    this.frameworkComponents = this.components;
  }
}
</script>

现在父级将传递所有需要的数据：

<ag-grid :column-defs="columnDefs" :components="frameworkComponents" :row-data="gridList"></ag-grid>

当我尝试将这些组件作为道具传递时，问题就来了：

this.frameworkComponents = {
  squareRenderer: SquareRenderer,
  cubeRenderer: CubeRenderer,
  paramsRenderer: ParamsRenderer,
  currencyRenderer: CurrencyRenderer,
  childMessageRenderer: ChildMessageRenderer,
};

显然，我的自定义组件不知道这些组件，因为它们没有被导入，所以视图找不到这些组件。由于每个视图将显示不同的列，并且这些列可以显示或不显示渲染器组件，因此我需要将所需的所有组件传递给网格组件并导入它们。

任何想法如何导入和使用这些组件？

标签： vue.jsag-gridag-grid-vue