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