Vue 報錯[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

方法一、

子元件通過$emit傳值到父元件中修改。

原因：

在 Vue 中，父子元件的關係可以總結為 prop 向下傳遞，事件向上傳遞。父元件通過 prop 給子元件下發資料，子元件通過事件給父元件傳送訊息。

Prop 是單向繫結的：當父元件的屬性變化時，將傳導給子元件，但是反過來不會。這是為了防止子元件無意間修改了父元件的狀態，來避免應用的資料流變得難以理解。

　解決辦法：

　　原理：將要更改的值，傳遞給父元件，在父元件中更改，再傳遞給子元件

　步驟：

　　先將值傳遞給子元件，子元件 props 接收並使用，然後通過 $emit 廣播一個事件給父元件，並將值一併傳遞，父元件 @子元件廣播過來的事件，並定義一個方法，在該方法中，改變傳遞過來的值，父元件又會將值傳遞給子元件，這樣就形成了一個閉環，問題得以解決 ************************************************************************************************************

5、總結：

父子元件傳值時，父元件傳遞的引數，陣列和物件，子元件接受之後可以直接進行修改，並且會傳遞給父元件相應的值也會修改。

如果傳遞的值是字串，直接修改會報錯。

不推薦子元件直接修改父元件中的引數，避免這個引數多個子元件引用，無法找到造成資料不正常的原因

6、官網說明：

https://cn.vuejs.org/v2/guide/components-props.html?

所有的 prop 都使得其父子 prop 之間形成了一個單向下行繫結：父級 prop 的更新會向下流動到子元件中，但是反過來則不行。這樣會防止從子元件意外改變父級元件的狀態，從而導致你的應用的資料流向難以理解。

額外的，每次父級元件發生更新時，子元件中所有的 prop 都將會重新整理為最新的值。這意味著你不應該在一個子元件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制檯中發出警告。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

方法二：

優雅更新props

更新prop在業務中是很常見的需求，但在子元件中不允許直接修改prop，因為這種做法不符合單向資料流的原則，在開發模式下還會報出警告。因此大多數人會通過$emit觸發自定義事件，在父元件中接收該事件的傳值來更新prop。

child.vue:

exportdefalut{
props:{
title:String
},
methods:{
changeTitle(){
this.$emit('change-title','hello')
}
}
}

parent.vue:

<child:title="title"@change-title="changeTitle"></child>

exportdefault{
data(){
return{
title:'title'
}
},
methods:{
changeTitle(title){
this.title=title
}
}
}

這種做法沒有問題，我也常用這種手段來更新prop。但如果你只是想單純的更新prop，沒有其他的操作。那麼sync修飾符能夠讓這一切都變得特別簡單。

parent.vue:

<child:title.sync="title"></child>

child.vue:

exportdefalut{
props:{
title:String
},
methods:{
changeTitle(){
this.$emit('update:title','hello')
}
}
}

只需要在繫結屬性上新增.sync，在子元件內部就可以觸發update:屬性名來更新prop。可以看到這種手段確實簡潔且優雅，這讓父元件的程式碼中減少一個“沒必要的函式”。

轉：https://www.cnblogs.com/pangchunlei/p/11139356.html

轉：https://mp.weixin.qq.com/s/2WonZaO_xK-MB5ANa8FvXA