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

Question

我正在尝试构建一个基于 DHTMLX 网格的 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 组件？

Answer 1

在这里，您可以查看 DHX Grid wrapper for Vue 的示例

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, {

Answer 2

你的每个网格对象都应该有一个唯一的名字，否则你需要用 destructor() 方法销毁当前的网格对象 https://docs.dhtmlx.com/suite/grid__api__grid_destructor_method.html 在创建同名的新文件之前

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

Build a reusable Vue component based on an object

javascript

components

dhtmlx

vue.js