vue-:visible.sync的作用

visible 常用与el-dialog、el-drawer组件中，

我们控制组件是否显示，写法如下，然后我们会在data中定义drawer的初始值，一般都是false

<el-drawer title="这是标题" :visible="drawer" ref="drawer">

 这个两个组件右上方可以显示"X"样的关闭按钮，点击这个按钮需要实现关闭组件的功能，那么就需要改变false的值，但是这个按钮的功能是子组件（el-drawer）的，在VUE中，prop的传递是父传给子，属于单向传输，而关闭事件在子组件里，一般情况下需要通过this.$emit来实现子组件向父组件通信。

虽然在子组件直接修改visible也能够关闭窗口，但是该变量不能传给父组件，所以并不建议这么做，（如果您任性，觉得父组件拿到这个变量也没用，那您尽管在子组件中修改，但是小心父组件的入参变化时会覆盖你的修改）

那么this.$emit的作用就是实现子组件向父组件向子组件通信用的

因此这里需要实现点击"X"可以关闭组件，有两种方法

方法一、

在子组件中通过this.$emit方法调用父组件的update方法，因为关闭按钮会调用子组件自己的close方法，因此修改如下，如下

close(){
  // this.visible =  false 删除这一行代码
  this.$emit('update:visible', false)
  }

方法二、

在visible后面添加.sync修饰符，这其实是一个语法糖

<el-drawer title="这是标题" :visible.sync="drawer" ref="drawer">

等价于

<el-drawer title="这是标题" :visible="visible" @update:visible="val => visible = val" ref="drawer">

与之相对，父组件需要调用子组件中的方法，this.$refs.子组件的ref.子组件的方法，代码如下

this.$refs.drawer.close

上面代码中的drawer，就是我们在，这里定义的ref="drawer"

参考

http://t.zoukankan.com/sugartang-p-14697089.html

https://blog.csdn.net/qq_26386437/article/details/108590530

https://blog.csdn.net/zjpjay/article/details/113992083