如何将一系列对象传递给Vuejs 2.x中的子组件

Question

我正在尝试发送一个包含数组的数组，该数组又将对象包含到另一个组件中，但数组中的内容似乎是在子component中为空的。

。

我尝试使用json.stringify（）和数组

将数据发送为字符串

我的父组件：

    data: function(){
 return{
       myLineItems : []
    }
},
created(){
 this.CreateLineItems();
},
methods:{

 CreateLineItems(){
      let myArrayData = [[{"title":"Title1","value":2768.88}],[{"title":"Title2","value":9}],[{"title":"Title3","value":53.61},{"title":"Title4","value":888.77},{"title":"Title5","value":1206.11},{"title":"Title6","value":162.5}]] 
    this.myLineItems = myArrayData;
    }
}

我的父组件的模板：

/*
 template: `<div><InvoiceChart v-bind:lineItems="myLineItems"></InvoiceChart></div>`

我的孩子组成部分：

const ChildComponent= {
    props: {
        lineItems: {
            type: Array
        }
    },
    mounted() {   
        console.log(this.lineItems);
    }
};

创建父组件（在我们主组件的方法内）：

 var ComponentClass = Vue.extend(InvoiceDetails);
                var instance = new ComponentClass({
                    propsData: { invoiceid: invoiceId }
                });
                instance.$mount();
                var elem = this.$refs['details-' + invoiceId];  
                elem[0].innerHTML = "";
                elem[0].appendChild(instance.$el);

如果我尝试在ChildComponent内部执行console.log（this），我可以看到LineItems属性上的正确数组数据。但是我似乎无法访问它。

我刚刚开始使用vuejs，所以我还没有完全掌握数据流，尽管我尝试阅读文档以及stackoverflow上的类似情况，但无济于事。

预期结果：使用this.lineItems应该是我从父母发送的我的值的填充数组。

实际结果：this.lineItems是一个空数组

编辑：问题似乎与我创建父部件的方式有关：

var ComponentClass = Vue.extend(InvoiceDetails);
                var instance = new ComponentClass({
                    propsData: { invoiceid: invoiceId }
                });
                instance.$mount();
                var elem = this.$refs['details-' + invoiceId];  
                elem[0].innerHTML = "";
                elem[0].appendChild(instance.$el);

将其更改为常规自定义VUE组件已解决了问题

Answer 1

代码-https://codesandbox.io/s/znl2yy478p

您可以通过函数json.stringify（）打印对象 - 在这种情况下，所有函数都将被省略，并且仅打印值。

Answer 2

代码中的一切看起来都不错。

问题是该属性无法正确传递，并且正在使用默认属性。

更新您实例化顶级组件的方式。

Answer 3

尝试以下=>

    const ChildComponent= {
    props: {
        lineItems: {
            type: Array
        }
    },
    mounted() {   
        console.log(this.lineItems);
    }
  };