如何使用动态属性数据动态渲染Vue组件的新实例

Question

我是一位有用的助手，可以为您进行文本翻译。

我有一个Vue组件，其实现接口如下。

<my-data-grid :colunms='columns' :rows='rows'></my-data-grid>

我需要在多个选项卡页面上动态呈现上述组件，并显示不同的数据。每个 my-data-grid 在不同的时间呈现。就像当一个新的数据集进来时，就创建一个新的页面来呈现该组件。目前它可以通过适当更新列和行属性来工作，但是一旦有新的数据进来，就会覆盖其他选项卡页面上的数据。

当我尝试以动态方式执行此操作，以便在运行时呈现该组件时，组件会显示，但是列和行属性没有更新。它显示 data() 未定义。

下面是我的代码的一部分。您还可以参考此链接Render other components in Tab using template。

Import MyDataGrid from "./MyDataGridComponent'
Vue.component('my-data-grid', MyDataGrid)
export default {
  name: 'app',
  data: function() {
    return {
      headerText0: {
        text: 'Tab1'
      },
      columns: ['some arrays'],
      rows: ['some arrays'],
      headerText1: {
        text: 'Tab2'
      },
      headerText2: {
        text: 'Tab3'
      },
      Content1: function() {
        return {
          template: Vue.component('MyDataGrid', {
              template: ' <my-data-grid :colunms='columns' :rows = 'rows' > < /my-data-grid>',
              data() {
                return {
                  colunms: this.columns,
                  rows: this.rows
                }
              }
            )
          }
        }
      }
    }
  }

我在过去的三天里搜索了互联网，现在有些疲惫。这是我第一次在stackoverflow上提问，如果我有偏差，请谅解。 感谢您的帮助。

- Damilinks

Answer 1

@Jim，感谢您的回复。经过很多搜索，我从这篇文章中找到了解决方案：https://css-tricks.com/creating-vue-js-component-instances-programmatically/。我通过使用Vue.extend创建MyDataGrid组件的副本来解决它，如下所示。

1. 以下行导入我的vue组件

import MyDataGrid from "./MyDataGridComponent.vue";

我将MyDataGrid组件传递给Vue.extend，以创建Vue构造函数的子类。

var MyDataGridClass = Vue.extend(MyDataGrid);

然后使用new关键字创建一个实例: propsData提供了我Vue组件中列和行道具所需的数据。

var instance = new MyDataGridClass({
  propsData: { columns: this.columns, rows: this.rows }
});

我在一个空元素上挂载实例

instance.$mount()

我使用了本地JavaScript API将它插入到我的页面的DOM元素中。

var tab  = document.getElementById('#mytab')
tab.appendChild(instance.$el)

完整代码如下所示。

import Vue from "vue";
import MyDataGrid from "./MyDataGridComponent.vue";

export default {
data: function () {
  return {
    columns: ['some array'],
    rows: ['some array']
  }
},
methods: {
  addTab() {
    var ComponentClass = Vue.extend(MyDataGrid);
    var instance = new ComponentClass({
      propsData: { columns: this.columns, rows: this.rows }
    });
    instance.$mount()
    var tab  = document.getElementById('#mytab')
    tab.appendChild(instance.$el)
  }
}
};

有时候挑战是创造力的肥料。寻找，你就会发现。

- Damilinks

Answer 2

组件上使用 'props' 定义属性。您正在将行和列定义为组件的本地数据。

将行和列移出数据字段，并添加一个 props 字段：

props: ['rows', 'columns'],

- Jim B.

---

谢谢您的回复。实际上我已经知道了，并且按照您建议的尝试过了，但是没有成功。我认为在这种情况下，根据我发布的链接中的源代码，他们在数据下使用了那些动态属性。请随意查看此链接here。 - Damilinks

我假设你模板中的拼写错误是由于转录到问题中引起的。将其分解为较小的测试用例可能会有所帮助，例如在jsfiddle或codepen或类似网站上进行测试。 - Jim B.