时间戳

首页 > 解决方案 > 基于对象构建可重用的 Vue 组件

javascript - 基于对象构建可重用的 Vue 组件

问题描述

我正在尝试构建一个基于 DHTMLX Grid 的 Vue 可重用组件，该组件是从一个对象初始化的，但问题是我正在尝试构建一个通用组件，目的是在单个页面中多次使用它在该组件内部，我有一个名为 grid 的对象声明，它是我用于创建网格的对象。

声明如下所示：

this.grid = new GridDHX(idGrid, {
        columns: X,
        height: X,
        selection: "simple",
        data: X,
      });

但是当我多次初始化组件时，因为对象名称是相同的在每次初始化中我都会遇到这些错误：

Method "grid" has type "object" in the component definition. Did you reference the function correctly?

Method "grid" has already been defined as a data property.

基本上问题是组件内部对象的名称被多次重用，所以就像它无法检测到哪个组件是哪个。

如何在没有这些问题的情况下创建可重用的 Vue 组件？

标签： javascriptvue.jscomponentsdhtmlx

解决方案

在这里，您可以查看 Vue 的 DHX Grid 包装器示例

https://github.com/DHTMLX/vue-suite-demo/blob/master/src/components/grid/GridBase.vue

并在这里进行现场演示

https://dhtmlx.github.io/vue-suite-demo/?path=/story/grid--base

import { Grid as GridDHX } from "dhx-suite";
export default {
  name: "GridBase",
  data: () => ({
    grid: null,
  }),
  mounted() {
    this.grid = new GridDHX(this.$refs.grid, {

推荐阅读