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

问题描述

我正在使用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,};

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

有什么想法如何导入和使用这些组件吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ag-grid ag-grid-vue vue.js