v-if和:visible.sync的使用技巧

今天在vue开发中，遇到点击按钮显示弹窗，输入部分数据后退出弹窗初始化弹窗信息的要求。如果通过父子组件穿数据的方式来实现就太麻烦了，可以通过结合v-if和:visible.sync的方式来实现：

 

 

 其中，v-if控制元素的存在与否（详情可参考vue中v-show和v-if在显示和隐藏元素上的区别：https://www.cnblogs.com/yingyigongzi/p/10875072.html），:visible.sync控制el-dialog的显示，当我们退出弹窗时会销毁子组件的变量，实现子组件初始化，下次进入就不会携带上次输入的信息了。

这里记录一下:visible.sync的原理，他是一个语法糖，用于子组件修改父组件中的值，实现双向绑定功能。实现原理如下：

// 父组件
<home :title.sync="title" />
//编译时会被扩展为
<home :title="title"  @update:title="val => title = val"/>

// 子组件
// 所以子组件可以通过$emit 触发 update 方法改变
mounted(){
  this.$emit("update:title", '这是新的title')
}