我有一个具有以下实现接口的 vue 组件。
<my-data-grid :colunms='columns' :rows='rows'></my-data-grid>Run Code Online (Sandbox Code Playgroud)
我需要在具有不同数据的多个标签页上动态呈现上述组件。每个 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: …Run Code Online (Sandbox Code Playgroud)