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

4.雙向綁定v-modal觸發的是父組件input事件，.sync觸發的是父組件的update事件.

總結

以上是生活随笔為你收集整理的VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。