Vue - Как передавать и динамически использовать несколько компонентов в качестве свойств

Я использую AgGrid в качестве сетки для отображения данных на сайте.

Следуя этому примеру Пример: рендеринг с использованием компонентов VueJS, я могу использовать разные компоненты для рендеринга в разные столбцы.

Теперь, когда мне нужно реализовать эту сетку в нескольких представлениях, я хочу создать "настраиваемый компонент", который реализует компонент 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,
};

Очевидно, мой пользовательский компонент не знает этих компонентов, потому что они не импортированы, поэтому представление не может найти эти компоненты. Поскольку в каждом представлении будут отображаться разные столбцы, и в них могут отображаться или не отображаться компоненты средства визуализации, мне нужно передать все компоненты, необходимые для компонента сетки, и импортировать их.

Есть идеи, как импортировать и использовать эти компоненты?

0 ответов

Другие вопросы по тегам