(一)sync分析之为啥el-dialog中的visible需要使用.sync
首先,笔者在使用element-ui 中的dialog组件时,发现visible属性在使用时需要添加.sync才生效,心中好奇,所以研究一下原理
我们先自己创建一个dialog组件,如下
当我们点击关闭按钮时,会发生警告
原因就是在VUE中,prop的传递是单向下行绑定的,也就是说只能父传给子,不能反过来。
虽然在demo中子组件直接修改visible也能够关闭窗口,但是该变量不能传给父组件,所以并不建议这么做,(如果您任性,觉得父组件拿到这个变量也没用,那您尽管在子组件中修改,但是小心父组件的入参变化时会覆盖你的修改)
现在思考,如果我们将子组件的变化告诉父组件,让父组件帮我们实现是否可行。也就是说我们操作子组件后通知父组件去关闭窗口,答案是可以的
在VUE中,子组件向父组件通信是通过事件完成的,this.$emit
我们点击子组件关闭按钮时,调用一下父组件的更新事件,让父组件在这个更新事件中改变visible这个变量,就可以实现子组件关闭了
.sync这个指令实际上是一个语法糖,在visible属性变化时会调用父组件的update:visible事件,我们将上面的demo修改如下
在使用该组件时,使用sync与法糖
该语法糖会扩展为
这样一来,visible就实现了父子同步,父组件初始化visible,子组件调用关闭事件,触发父组件update事件,父组件在update事件中更新visible变量,改变子组件可见的状态
我们在实现双向绑定时经常使用v-modal,这里看来,使用.sync也是可以的,不同在于v-modal触发的是父组件的input事件,.sync触发的是父组件的update事件
(一)sync分析之为啥el-dialog中的visible需要使用.sync的更多相关文章
- Linux就这个范儿 第15章 七种武器 linux 同步IO: sync、fsync与fdatasync Linux中的内存大页面huge page/large page David Cutler Linux读写内存数据的三种方式
Linux就这个范儿 第15章 七种武器 linux 同步IO: sync.fsync与fdatasync Linux中的内存大页面huge page/large page David Cut ...
- 在jsp中怎么使用Cookie?el表达式中获取cookie的问题
初学jsp,不清楚cookie的使用方法,希望高手指点一下! 一般来说有两种办法,在JSP中使用Java的嵌入脚本. 例如: 写入Cookie <html> <head>. ...
- Dialog中更新Activity的数据显示
假设有一个activity,activity中有一个Button和一个TextView,点击按钮,弹出Dialog,对话框中有一个ListView,选中ListView中的某一项,关闭对话框,更新ac ...
- 8.源码分析---从设计模式中看SOFARPC中的EventBus?
我们在前面分析客户端引用的时候会看到如下这段代码: // 产生开始调用事件 if (EventBus.isEnable(ClientStartInvokeEvent.class)) { EventBu ...
- EL表达式中的empty和null
EL表达式中的empty和null 先说一下EL表达式中的null和empty区别,然后再说说最近在项目中出现的一个有趣的问题. EL中的null和empty都可用来判断值是否为空,但两者存在略微的区 ...
- geotrellis使用(十六)使用缓冲区分析的方式解决投影变换中边缘数据值计算的问题
Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 问题探索 采样说明 实现方案 总结 一.前言 ...
- finish()在dialog中的作用
finish()在dialog中销毁的是dialog所在的活动:
- EL表达式中fn函数 (转载)
JSTL 使用表达式来简化页面的代码,这对一些标准的方法,例如bean的getter/setter方法,请求参数或者context以及 session中的数据的访问非常方便,但是我们在实际应用中经常需 ...
- android中自定义的dialog中的EditText无法弹出输入法解决方案
1.解决无法弹出输入法: 在show()方法调用之前,用dialog.setView(new EditText(context))添加一个空的EditText,由于是自定义的AlertDialog,有 ...
随机推荐
- TensorFlow如何提高GPU训练效率和利用率
前言 首先,如果你现在已经很熟悉tf.data+estimator了,可以把文章x掉了╮( ̄▽ ̄””)╭ 但是!如果现在还是在进行session.run(..)的话!尤其是苦恼于GPU显存都塞满了利用 ...
- NOIP模拟 1
NOIP模拟1,到现在时间已经比较长了.. 那天是6.14,今天7.18了 //然鹅我看着最前边缺失的模拟1,还是终于忍不住把它补上,为了保持顺序2345重新发布了一遍.. # 用 户 名 ...
- 使用FinalShell 安装jdk和tomcat流程(Linux系统是centOS7.5)
本文是作者原创,版权归作者所有.若要转载,请注明出处 我今天刚刚买了一个一年的百度云服务器,85元,还是很便宜的,正好用来练练linux,至于为什么使用FinalShell 而不是xshell,因为F ...
- 大数据之路day03--java循环的延申与练习(while 、do-while、for)
在今天,我突然被一个很尴尬的问题问到了,问题是这样的:说一下java循环的应用场景. 我想很多人一下子听到这样的问题不知道怎么回答,大部分人会去想有什么循环格式,特点是什么.这些都是错误的,在往后的面 ...
- Elastic Stack 开源的大数据解决方案
目的 本文主要介绍的内容有以下三点: 一. Elastic Stack是什么以及组成部分 二. Elastic Stack前景以及业务应用 三. Elasticsearch原理(索引方向) 四. El ...
- 一道笔试题(vue,react)
题目: vue代码 <template> <div class="colculate"> <div> <select v-model=&q ...
- 开启docker远程访问
开启docker远程访问 进入到/lib/systemd/system/docker.service vim /lib/systemd/system/docker.service 找到ExecStar ...
- Java基础知识之常量变量(一)
1.什么是变量,什么是常量?java的基本数据类型是什么 变量: 会发生改变的数据,叫做变量,如自定义一个a,并且对a进行赋值操作为1,也可以让a等于2,此时a就是一个变量 常量: 不会发生改变的值, ...
- 暑假CV-QKD的相关论文单词集(第一弹)
CV-QKD 连续变量-量子秘钥分发 Quadrature 正交 Photon 光子 Coherent 连续的,连贯的 Reconciliation 调解 Cryptograph ...
- MySQL如何永久解决由dos编码格式导致MySQ的显示乱码
MySQL如何永久解决由dos编码格式导致MySQ的显示乱码 Ⅰ.新建文件 changeCode.txt Ⅱ.粘贴下面代码(作用:将默认的GBK(936)修改为UTF-8(65001)) Window ...