VUE基礎(chǔ)之:visible.sync-模態(tài)框顯示隱藏、elementUI dialog組件報(bào)錯(cuò)或者visible屬性不生效問題

這篇文檔存成草稿2年了，最近終于有時(shí)間拉出來寫完了。。。。

我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到:visible.sync修飾符，特別是當(dāng)你使用elementUI的時(shí)候，el-dialog組件如果不使用:visible.sync就會出現(xiàn)一些意想不到的問題，比如說瘋狂報(bào)錯(cuò)給你看~~~

場景：

父組件引用子組件

<child-dialog :visible="visible"></child-dialog>

子組件是個(gè)dialog,

父組件傳入props--visible：true/false來控制dialog的開啟和關(guān)閉狀態(tài)

子組件有個(gè)關(guān)閉按鈕，按鈕綁定方法

close(){this.visible =  false}

當(dāng)我們點(diǎn)擊關(guān)閉按鈕，就會發(fā)生報(bào)錯(cuò)警告

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的傳遞是父傳給子，屬于單向傳輸，而關(guān)閉事件在子組件里，一般情況下需要通過this.$emit來實(shí)現(xiàn)子組件向父組件通信

3.sync指令其實(shí)是調(diào)用了父組件里寫的update，從而實(shí)現(xiàn)visible的父子同步，父組件初始化visible,子組件調(diào)用關(guān)閉事件，觸發(fā)父組件的update

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。