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')
}

 

posted @ 2020-08-27 14:47  Do丶  阅读(9178)  评论(0编辑  收藏  举报