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') }
愿所有远方终将抵达
愿爱你的人一直都在