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

Logo

前往低代码交流专区

更多推荐