Question

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

我尝试使用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);

如果我尝试在子组件内部执行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

尝试如下=>

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

Answer 2

您的代码中的所有内容看起来都很不错。

问题在于该属性未正确传递，并且正在使用默认属性。

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

Answer 3

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

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

如何在VueJS 2.x中将对象数组传递给子组件

3 个答案: