vue父子組件怎麼傳值

背景：最近在作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.grpVisible
demo1 = true
this.$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)