如何使用动态道具数据动态渲染 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
                }
              }
            )
          }
        }
      }
    }
  }

在过去的 3 天里，我一直在网上搜索，不知何故，我已经筋疲力尽了。这是我第一次在 stackoverflow 上提问，如果我跑题了，请原谅我。感谢您的帮助。

Answer 1

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

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

   import MyDataGrid from "./MyDataGridComponent.vue";
   

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

   var MyDataGridClass = Vue.extend(MyDataGrid);
   

3. 然后使用 new 关键字创建一个实例：propsData为我的 vue 组件中的列和行道具提供数据。

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

4. 我将实例安装在一个空元素上

   instance.$mount()
   

5. 我使用本机 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)
  }
}
};

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