背景：最近在做vue的項目，因為頁面的邏輯比較復雜，代碼量較多，所以就想抽離出一些組件放到component里面。問題就隨之來了。

因為vue不提倡在子組件中修改父組件的值，所以如果要這樣操作的話就要麻煩一步，而我正好需要這樣的操作，于是就查閱了資料

上父組件的代碼，引用了exp-group子組件

<exp-group :grpVisible="grpVisible" :grpData="grpData" @updateData="acceptData"></exp-group>

grpVisible 和 grpData 是傳給子組件的屬性，一個是普通類型，一個是對象

grpVisible: false,grpData: {app: this.$route.query.app, exp: this.$route.query.exp},

接下來我要在子組件中改變這兩個屬性的值傳給父組件，先要在子組件中定義一下

props: { grpVisible: {  type: Boolean,  default: false }, grpData: {  type: Object }},

首先普通類型的 grpVisible 屬性如果要修改，需要定義一個變量將 grpVisible 值復制給這個變量，然后再修改這個變量，傳遞給父組件，具體見代碼

let demo1 = this.grpVisibledemo1 = truethis.$emit('updateData', demo1) //子組件

父組件通過acceptData的參數value接收這個值

acceptData (value) { console.log(value)}, //父組件

如果是對象的話，就需要用Object.assign拷貝一份新的賦值給一個變量，然后修改這個變量，傳遞給父組件，代碼如下：

let demo1 = Object.assign({}, this.grpData)demo1.app = 'binge'this.$emit('updateData', demo1)

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。