(一)sync分析之为啥el-dialog中的visible需要使用.sync

站长

发表文章数:4335

目标检测 1 : 目标检测中的Anchor详解

首先,笔者在使用element-ui 中的dialog组件时,发现visible属性在使用时需要添加.sync才生效,心中好奇,所以研究一下原理

我们先自己创建一个dialog组件,如下

(一)sync分析之为啥el-dialog中的visible需要使用.sync

 

 当我们点击关闭按钮时,会发生警告

(一)sync分析之为啥el-dialog中的visible需要使用.sync

 

 原因就是在VUE中,prop的传递是单向下行绑定的,也就是说只能父传给子,不能反过来。

虽然在demo中子组件直接修改visible也能够关闭窗口,但是该变量不能传给父组件,所以并不建议这么做,(如果您任性,觉得父组件拿到这个变量也没用,那您尽管在子组件中修改,但是小心父组件的入参变化时会覆盖你的修改)

现在思考,如果我们将子组件的变化告诉父组件,让父组件帮我们实现是否可行。也就是说我们操作子组件后通知父组件去关闭窗口,答案是可以的

在VUE中,子组件向父组件通信是通过事件完成的,this.$emit

我们点击子组件关闭按钮时,调用一下父组件的更新事件,让父组件在这个更新事件中改变visible这个变量,就可以实现子组件关闭了

.sync这个指令实际上是一个语法糖,在visible属性变化时会调用父组件的update:visible事件,我们将上面的demo修改如下

(一)sync分析之为啥el-dialog中的visible需要使用.sync

unity3D 游戏物体同时绑定单击、双击事件

 

 

在使用该组件时,使用sync与法糖

(一)sync分析之为啥el-dialog中的visible需要使用.sync

 

 该语法糖会扩展为

 (一)sync分析之为啥el-dialog中的visible需要使用.sync

 

这样一来,visible就实现了父子同步,父组件初始化visible,子组件调用关闭事件,触发父组件update事件,父组件在update事件中更新visible变量,改变子组件可见的状态

 

我们在实现双向绑定时经常使用v-modal,这里看来,使用.sync也是可以的,不同在于v-modal触发的是父组件的input事件,.sync触发的是父组件的update事件

 

 

 

 

基于Win服务的标签打印(模板套打)

未经允许不得转载作者:站长, 转载或复制请以 超链接形式 并注明出处 xss云之家,资源网,娱乐网,网络技术资源分享平台
原文地址:《(一)sync分析之为啥el-dialog中的visible需要使用.sync》 发布于2019-12-09

分享到:
赞(0) 打赏 生成海报

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

投稿赚钱
2020年在家赚取零花钱
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册