VUE基礎之:visible.sync-模態框顯示隱藏、elementUI dialog組件報錯或者visible屬性不生效問題
這篇文檔存成草稿2年了，最近終於有時間拉出來寫完了。。。。
我們日常開發中經常遇到:visible.sync修飾符，特別是當你使用elementUI的時候，el-dialog組件如果不使用:visible.sync就會出現一些意想不到的問題，比如說瘋狂報錯給你看~~~
場景：
父組件引用子組件
<child-dialog :visible="visible"></child-dialog>
子組件是個dialog,
父組件傳入props--visible：true/false來控制dialog的開啟和關閉狀態
子組件有個關閉按鈕，按鈕綁定方法
close(){this.visible = false}
當我們點擊關閉按鈕，就會發生報錯警告
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: "visible"
解決辦法：
1.修改子組件按鈕綁定方法 為
close(){
// this.visible = false 刪除這一行代碼
this.$emit('update:visible', false)
}
2.修改父組件
<child-dialog :visible.sync="visible"></child-dialog>
完成~
這么做的原因如下：
1.visible.sync語法糖簡單介紹
<child-dialog :visible.sync="visible"></child-dialog>
等同於
<child-dialog :visible="visible" @update:visible="val => visible = val"></child-dialog>
2.在VUE中，prop的傳遞是父傳給子，屬於單向傳輸，而關閉事件在子組件里，一般情況下需要通過this.$emit來實現子組件向父組件通信
3.sync指令其實是調用了父組件里寫的update，從而實現visible的父子同步，父組件初始化visible,子組件調用關閉事件，觸發父組件的update
