首先,笔者在使用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的更多相关文章

  1. 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 ...

  2. 在jsp中怎么使用Cookie?el表达式中获取cookie的问题

    初学jsp,不清楚cookie的使用方法,希望高手指点一下!   一般来说有两种办法,在JSP中使用Java的嵌入脚本. 例如: 写入Cookie <html> <head>. ...

  3. Dialog中更新Activity的数据显示

    假设有一个activity,activity中有一个Button和一个TextView,点击按钮,弹出Dialog,对话框中有一个ListView,选中ListView中的某一项,关闭对话框,更新ac ...

  4. 8.源码分析---从设计模式中看SOFARPC中的EventBus?

    我们在前面分析客户端引用的时候会看到如下这段代码: // 产生开始调用事件 if (EventBus.isEnable(ClientStartInvokeEvent.class)) { EventBu ...

  5. EL表达式中的empty和null

    EL表达式中的empty和null 先说一下EL表达式中的null和empty区别,然后再说说最近在项目中出现的一个有趣的问题. EL中的null和empty都可用来判断值是否为空,但两者存在略微的区 ...

  6. geotrellis使用(十六)使用缓冲区分析的方式解决投影变换中边缘数据值计算的问题

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 问题探索 采样说明 实现方案 总结 一.前言     ...

  7. finish()在dialog中的作用

    finish()在dialog中销毁的是dialog所在的活动:

  8. EL表达式中fn函数 (转载)

    JSTL 使用表达式来简化页面的代码,这对一些标准的方法,例如bean的getter/setter方法,请求参数或者context以及 session中的数据的访问非常方便,但是我们在实际应用中经常需 ...

  9. android中自定义的dialog中的EditText无法弹出输入法解决方案

    1.解决无法弹出输入法: 在show()方法调用之前,用dialog.setView(new EditText(context))添加一个空的EditText,由于是自定义的AlertDialog,有 ...

随机推荐

  1. 【翻译】Prometheus 2.12.0 新特性

    Prometheus 2.12.0 现在(2019.08.17)已经发布,在上个月的 2.11.0 之后又进行了一些修正和改进. 在当前的 6 周发布周期中,每一个 Prometheus 版本都有比较 ...

  2. Linux下Redis安装与配置

    http://www.cnblogs.com/_popc/p/3684835.html

  3. inline-block元素间隙产生及去除方法

    当我们把元素属性display设置成inline-block时,元素之间就会产生间隙 <!DOCTYPE html><html> <head> <meta c ...

  4. php charles 使用方法

    php charles 使用方法 打开charles 点击help菜单点击local ip address 可以获取本地ip 手机上选择代理这个ip 端口8888 然后手机访问网页 charles会弹 ...

  5. Python 基础 常用模块

    Python 为我们提供了很多功能强大的模块,今天就主要使用的到的模块进行整理,方便后面来翻阅学习. 一.时间模块 在时间模块中我们重点介绍几种自己常用的功能,主要方便我们按照自己想要的方式获取时间 ...

  6. Unity入门--实用知识

    目录 1. VS适配 2.实用快捷操作 3.Unity API文档 4.项目整理 1. VS适配 让你的VS完美支持Unity的脚本编写可以让你写起C#脚本来事半功倍,比如代码补全功能,可以参考下面这 ...

  7. java线程池的介绍与使用(Executor框架)

    1. 先来看一下类构成 public interface Executor { //顶级接口Executor,定义了线程执行的方法 void execute(Runnable command); } ...

  8. PHP 7.4 新语法:箭头函数

    短闭包,也叫做箭头函数,是一种用 php 编写的短函数.当向函数中传递闭包时,这个功能是非常有用的,比如使用 array_map 或是 array_filter 函数时. 译者注:PHP7.4 计划于 ...

  9. [ISE使用] 使用ISE的过程中,遇到过的一些“软件上的问题”

    1.planahead打不开了. PlanAhead替代文件rdiArgs.bat的下载链接如下: http://www.eevblog.com/forum/microcontrollers/guid ...

  10. Vue img的src使用数据绑定不显示

    不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. <img src="{{ imgUrl }}"/> 原因:写法错误 解决 ...