小编Dam*_*nks的帖子

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

我有一个具有以下实现接口的 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)

dynamic syncfusion vue.js vue-component

7
推荐指数
1
解决办法
4892
查看次数

标签 统计

dynamic ×1

syncfusion ×1

vue-component ×1

vue.js ×1