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
                }
              }
            )
          }
        }
      }
    }
  }

过去3天，我一直在互联网上搜索，但我有点精疲力尽。这是我第一次对stackoverflow提出问题，以防万一，请原谅我。感谢您的协助。

Answer 1

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

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

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

Answer 2

@Jim感谢您的回复，经过大量搜索，我能够从此article: https://css-tricks.com/creating-vue-js-component-instances-programmatically/获得解决方案。我通过使用Vue.extend创建MyDataGrid组件的副本来解决它，如下所示。

以下行导入了我的vue组件

import MyDataGrid from "./MyDataGridComponent.vue";

我将MyDataGrid组件传递给 Vue.extend ，以创建Vue构造函数的子类
```
var MyDataGridClass = Vue.extend(MyDataGrid);
```
，然后使用新关键字创建一个实例： propsData 为vue组件中的列和行props提供所需的数据。
```
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)
  }
}
};

有时候挑战是创造力的肥料。寻求，您将找到。

如何使用动态props数据动态渲染vue组件的新实例

2 个答案: