遇錯
小編初學Vue.js，在用其和element-ui寫一個後臺管理模版的時候，遇到以下錯誤：
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "openFlag"
噢賣瓜，我只想好好寫一下代碼，為什麼你會報這樣的錯誤？求倒嗎呆，好像我的頁面還是能夠正常運行。
解決
在這裡要說一下背景，小編是在用element-ui的Dialog對話框寫一個組件，這時候需要父組件傳一個布爾值來顯示對話框，於是就有以下代碼：
- Dialog對話框組件
或許我是個對話框，或許我不是一個對話框，who knows
- 父組件使用
在我苦思冥想之際，瞄了一眼element-ui的對話框文檔，有下圖：
element-ui文檔
請注意圖中的紅線部分，“支持.sync修飾符”，再想想我們剛才的報錯，小編直接了當的把.sync修飾符去掉了，代碼如下：
或許我是個對話框，或許我不是一個對話框，who knows
保存後，果然打開對話框時不再報錯。
分析
回想剛剛的報錯，小編的英文不大好，就大致說一下自己理解的意思：避免直接修改prop，因為父組件重新渲染後，該值就會被覆蓋，用一個基於openFlag的數據或可計算的屬性來監聽其變化。
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "openFlag"
換個話來說就是子組件不能改變父組件的屬性，而element-ui對話框的“.sync”屬性，會同步改變父組件的屬性，但這是vue不允許的，所以控制檯打印了這一波錯出來。
方案
當然，我們都知道，從父組件可以將值傳到子組件的props，換句話說，父組件可以決定子組件的值，可以改變子組件的值。那麼，如果我們還是想改變父組件的屬性值，那應該怎麼辦呢？
我們可以給子組件添加一個自定義事件，在子組件改變值的時候，添加以下代碼：
close:function(){
this.$emit("callback", false); //這裡的意思是為子組件添加一個callback的屬性，並傳遞一個false的參數
}
那麼，父組件，就可以這麼寫：
這時候，父組件的dialogCallBack方法，就可以為所欲為了
dialogCallBack:function(flag){
this.openFlag = flag;
}
由於小編的技術水平有限，如果有文中有什麼錯誤，歡迎大家指出。
閱讀更多 Kuey的Java全棧日記 的文章
