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 廣播一個事件給父組件，並將值一並傳遞，父組件 @子組件廣播過來的事件，並定義一個方法，在該方法中，改變傳遞過來的值，父組件又會將值傳遞給子組件，這樣就形成了一個閉環，問題得以解決