vue子組件修改父組件傳遞過來的值

這裏再也不贅述父子組件及子父組件傳值，不懂的同窗能夠翻看我之前寫過的關於二者傳值的文章

父子組件傳值：https://www.cnblogs.com/Sky-Ice/p/9267192.html

子父組件傳值：https://www.cnblogs.com/Sky-Ice/p/9289922.html

 

直接進入正題，把一個布爾值傳遞給子組件，而後，在子組件中修改該值，會報錯

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

　 緣由：

在 Vue 中，父子組件的關係能夠總結爲 prop 向下傳遞，事件向上傳遞。父組件經過 prop 給子組件下發數據，子組件經過事件給父組件發送消息。

Prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，可是反過來不會。這是爲了防止子組件無心間修改了父組件的狀態，來避免應用的數據流變得難以理解。

　解決辦法：

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

　步驟：

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