VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题

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事件.