ag-grid-vue 报错 Could not find component XXX,是不是忘记配置这个组件了?

Error in ag-grid-vue Could not find component XXX, did you forget to configure this component?

我正在使用 ag-grid-vue,我正在尝试创建自定义工具提示。

这是我的代码:

CustomToolTipVue.js分量:

export default {
  template: `
      <div class="custom-tooltip" v-bind:style="{ backgroundColor: color }">
          <p><span>{{ data.athlete }}</span></p>
          <p><span>Country: </span>{{ data.country }}</p>
          <p><span>Total: </span>{{ data.total }}</p>
      </div>
    `,
  data: function () {
    return {
      color: null,
      athlete: null,
      country: null,
      total: null,
    };
  },
  beforeMount() {
    this.data = this.params.api.getDisplayedRowAtIndex(
      this.params.rowIndex
    ).data;
    this.color = this.params.color || 'white';
  },
};

网格组件 - 我正在使用它的地方(仅附上主要代码):

<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-community";
import CustomToolTipVue from './CustomToolTipVue.js'

export default {
  name: "Grid",
  data: () => ({
    gridOptions: null,
    gridApi: null,
    gridColumnApi: null,
    selectedRows: [],
    noRowsTemplate: "",
    loadingTemplate: "",
    rowClassRules:null
  }),
  components: {
    AgGridVue,
    CustomToolTipVue
  },
  created() {
    this.gridOptions = {};
    this.gridOptions.columnDefs = this.columnDefs;
    this.gridOptions.components = {
    };
  },
  computed: {
    defaultColDef() {
      return {
        resizable: true,
        menuTabs: ["filterMenuTab", "generalMenuTab", "columnsMenuTab"],
        sortable: true,
        filter: true,
        tooltipComponentParams: { color: '#ececec' },
        tooltipComponent: "CustomToolTipVue",
      };
    },
  },

而且我不断收到此错误:

“找不到组件 CustomToolTipVue,您是否忘记配置该组件?”

知道为什么吗?

通过升级 ag-grid 到最新版本 - 27.0.0

设法解决了这个问题