首先,笔者在使用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. Feign设置assessToken

    import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.an ...

  2. Docker常见报错解决方法记录

    [问题一]OCI runtime exec failed......executable file not found in $PATH": unknown [root@localhost ...

  3. re模块的基本使用

    目录 re模块 常用元字符 特殊构造 贪婪模式 非贪婪模式 re的常用函数 re模块补充 关于re模块必须知道的知识点 re模块 re模块 , 即正则表达式 , 本身是一种小型的.高度专业化的编程语言 ...

  4. python手册学习笔记2

    笔记2 > http://www.pythondoc.com/pythontutorial3/datastructures.html 列表操作 list.append(x) 把一个元素添加到列表 ...

  5. day5-基本数据类型总结

    一.数字int(..)二.字符串replace/find/join/strip/startswith/split/upper/lower/format tempalte = "i am {n ...

  6. 004.Kubernetes二进制部署创建证书

    一 创建CA证书和密钥 1.1 安装cfssl工具集 [root@k8smaster01 ~]# mkdir -p /opt/k8s/cert [root@k8smaster01 ~]# curl - ...

  7. linux中jdk的安装

    //先检查jdk有没有安装 java -version   cp jdk-7u79-linux-x64.tar.gz /usr/local/ cd /usr/local/ tar -zxvf jdk- ...

  8. glsl shader简明教程系列1

    glsl shader简明教程系列1 底层的东西我就不说了(自己去百度翻基础教程)  我直接说上层了(片段着色器) web编辑器还在开发中 有了编辑器 到时候可以把代码复制上去可以看到效果了 1  实 ...

  9. windows系统cmd命令行窗口查看端口占用情况

    # 查看所有在用端口 netstat -ano # 查看指定端口 netstat -ano | findstr 8899 # 结束该进程:taskkill /f /t /im javaw.exe:或者 ...

  10. mysql 创建用户及授权(1)

    一. 创建用户 命令: CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明: username:你将创建的用户名 host:指定该用户 ...