方法一、
子組件通過$emit傳值到父組件中修改。
原因：
在 Vue 中，父子組件的關系可以總結為 prop 向下傳遞，事件向上傳遞。父組件通過 prop 給子組件下發數據，子組件通過事件給父組件發送消息。
Prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是反過來不會。這是為了防止子組件無意間修改了父組件的狀態，來避免應用的數據流變得難以理解。
5、總結：
父子組件傳值時，父組件傳遞的參數，數組和對象，子組件接受之后可以直接進行修改，並且會傳遞給父組件相應的值也會修改。
如果傳遞的值是字符串，直接修改會報錯。
不推薦子組件直接修改父組件中的參數，避免這個參數多個子組件引用，無法找到造成數據不正常的原因
6、官網說明：
https://cn.vuejs.org/v2/guide/components-props.html?
所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。
額外的，每次父級組件發生更新時，子組件中所有的 prop 都將會刷新為最新的值。這意味着你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制台中發出警告。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
方法二：
優雅更新props
更新 prop 在業務中是很常見的需求，但在子組件中不允許直接修改 prop，因為這種做法不符合單向數據流的原則，在開發模式下還會報出警告。因此大多數人會通過 $emit 觸發自定義事件，在父組件中接收該事件的傳值來更新 prop。
child.vue:
export defalut {
props: {
title: String
},
methods: {
changeTitle(){
this.$emit('change-title', 'hello')
}
}
}
parent.vue:
<child :title="title" @change-title="changeTitle"></child>
export default {
data(){
return {
title: 'title'
}
},
methods: {
changeTitle(title){
this.title = title
}
}
}
這種做法沒有問題，我也常用這種手段來更新 prop。但如果你只是想單純的更新 prop，沒有其他的操作。那么 sync 修飾符能夠讓這一切都變得特別簡單。
parent.vue:
<child :title.sync="title"></child>
child.vue:
export defalut {
props: {
title: String
},
methods: {
changeTitle(){
this.$emit('update:title', 'hello')
}
}
}
只需要在綁定屬性上添加 .sync，在子組件內部就可以觸發 update:屬性名 來更新 prop。可以看到這種手段確實簡潔且優雅，這讓父組件的代碼中減少一個“沒必要的函數”。