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，就是我们在<el-drawer title="这是标题" :visible="drawer" ref="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

vue-:visible.sync的作用相关推荐

element中el-dialog的:visible.sync理解
今天一直在纠结dialog中的sync有什么用?? 因为在官方文档的在线运行中,没有发现其他方法: 所以一度认定,sync就是起一个关闭弹层的作用:原本在子组件中使用el-dialog时,去掉sync ...
vue中 .sync 修饰符个人理解
vue中.sync修饰符有什么用 .sync 修饰符其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
vue3中 :visible.sync 和slot报错
1. :visible.sync :visible指的是属性绑定,表示弹框的显示隐藏. 当:visible的值为ture的时候,弹框显示,当为false的时候,弹框隐藏 :visible.sync ...
vue中sync的使用
vue2.3.x: 以上是vue2.3.x时sync的用法,其实在平常的工作中我用到sync最多的场景一般是父子组件之间控制的dialog弹框的显示隐藏,其实看一下UI库的文档,比如element-u ...
Element Ui 中的 :visible.sync
若依后台管理[前端] 若依的前端基于饿了么(Element UI)进行开发,其中用到的组件也是非常之多的,如果没有仔细的看过和深入的了解Element UI 那么开发时就会相对的遇到一些问题(说的就是 ...
封装Dialog子组件解决 visible.sync问题
子组件 1.visible.sync语法糖简单介绍 ** <child-dialog :visible.sync="visible"></child-dialog ...
[vue] $nextTick有什么作用？
[vue] $nextTick有什么作用? 处理数据动态变化后,dom还未及时更新的问题.nexttick就可以获取到数据更新后最新的dom变化个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃 ...
[vue] vue生命周期的作用是什么？
[vue] vue生命周期的作用是什么? 准确地控制数据流和其对DOM的影响个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前 ...
vue中.sync修饰符与自定义组件的v-model的使用
.sync修饰符有时我们需要父组件向子组件传值,并且子组件要修改父组件中的值是,我们一般会这样写 //父组件 <template>//子组件修改值父组件注册自定义事件传过来的参数通过 ...

vue-:visible.sync的作用

vue-:visible.sync的作用相关推荐

最新文章

热门文章