Vue共同引用，造成修改数据差异问题

Vue父元素给子元素传对象参数

父元素：

<invoice-update-status ref="invoiceUpdateStatus" :updateInvoice="updateInvoice" @resetBtn="handleUpdateReset" @success="handleUpdateQuery"/>

子元素：

name: 'invoiceUpdateStatus',
props: {
  updateInvoice: {
    type: Object,
    default: () => {
    }
  },
},

传参方式：

this.updateInvoice = this.selections[0]

当子元素页面修改updateInvoice时，父元素页面数据也跟着相应变化。
是由于使用了同一个引用。

解决方式

this.updateInvoice = JSON.parse(JSON.stringify(this.selections[0]))

将this.selections[0] 这个对象 进行序列化 和反序列化。