如何使用动态道具数据动态呈现 vue 组件的新实例

Posted 2023-02-23

【中文标题】如何使用动态道具数据动态呈现 vue 组件的新实例

【英文标题】：How can I render a new instance of vue component dynamically with dynamic props data

【发布时间】：2019-04-03 13:53:10

【问题描述】：

我有一个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 天里，我一直在网上搜索，但不知怎的，我已经筋疲力尽了。这是我第一次在***上提问，如果我跑题了，请原谅我。 感谢期待您的帮助。

【参考方案1】：

@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);

然后使用 new 关键字创建一个实例：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)
  

;

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

【参考方案2】：

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

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

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

【讨论】：

感谢您的回复。其实我知道这一点，我已经按照你的建议尝试过，它没有用。我认为在这种情况下，根据我发布的链接上的来源，他们在数据下使用了那些动态道具。请随时查看此链接here

我假设您模板中的拼写错误来自转录问题。将其分解为较小的测试用例可能会有所帮助，可能在 jsfiddle 或 codepen 或类似的地方。