我有一个具有以下实现接口(interface)的 vue 组件。
<my-data-grid :colunms='columns' :rows='rows'></my-data-grid>
我需要在具有不同数据的多个标签页上动态呈现上述组件。每个 my-data-grid 在不同的时间呈现。就像一组新数据进来,然后创建一个呈现组件的新页面。目前它适用于正确更新列和行 Prop ,但一旦有新数据进入,就会覆盖其他标签页上的数据。
当我尝试动态执行此操作以便可以在运行时呈现组件时,组件显示但列和行 Prop 没有更新。它显示 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上提问,如果我跑题了,请原谅我。
感谢您的帮助。
最佳答案
@Jim 感谢您的回复,经过大量搜索后,我能够从 article: https://css-tricks.com/creating-vue-js-component-instances-programmatically/ 获得解决方案.我通过使用 Vue.extend 创建 MyDataGrid 组件的副本来解决它,如下所示。
import MyDataGrid from "./MyDataGridComponent.vue";
var MyDataGridClass = Vue.extend(MyDataGrid);
var instance = new MyDataGridClass({
propsData: { columns: this.columns, rows: this.rows }
});
instance.$mount()
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)
}
}
};
有时挑战是创造力的肥料。寻找,你就会找到。
关于vue.js - 如何使用动态 Prop 数据动态呈现 vue 组件的新实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53065722/