问题场景

用element-ui的el-dialog封装了一个弹窗组件，大致长这样

把visible和config通过父子组件通信，在子组件绑定使用

但是发现子组件的visible值已经由false改为true，但是弹窗并没有出现，原来是父组件中的dialogVisble还是false

解决方案： 使用computed的get和set对dialogVisble进行赋值，一旦visible发生改变就更改dialogVisble的值

.sync修饰符？

是一个语法糖，在visible属性变化时会调用父组件的update:visible事件，在子组件中

:visible.sync会被扩展成为@update:visble = "val = visible => val" 这样一来，visible就实现了父子同步，父组件初始化visible，子组件触发父组件update事件，父组件在update事件中更新visible变量，改变子组件可见的状态。

总结

我们一般通过v-model改变input输入框的状态，来实现双向绑定，其实通过.sync修饰符也可以，不过它触发的是父组件的update事件，不用$on可以自动触发更新。