一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”。

  正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是用来控制是否显示Dialog的,后面特意强调了支持.sync修饰符。

  所以,此时再次看到.sync修饰符,就会想到这个Dialog,那么必然不能放过了,正好好好研究一下.sync修饰符的用法。

  vue官网关于.sync:

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。

  这说明在某些情况下数据传递需要“双向绑定”,但又不能为了这些少数情况,而导致多数情况的数据维护困难,所以就“推荐以 update:myPropName 的模式触发事件取而代之”,此时父组件就会稍显麻烦,需要先绑定数据v-bind,然后监听v-on:update:myPropName,为了父组件使用上的方便,vue于是为这种模式提供了.sync修饰符,也就是说父组件直接使用:myPropName.sync传递数据,子组件使用this.$emit("update:myPropName",myPropValue),就实现了部分情况下的父子组件的数据双向绑定。

  通过具体代码实现一遍比较具象:

  父组件:

<modal-stop title="附加设备停用" :dialogVisible.sync="visible" @confirm="stopDevicesConfirm"/>

  子组件是一个Dialog,那么点击“取消”按钮时,其实也就是一个操作——关闭弹窗,那么此时如果能够不需要在每一个父组件当中定义:this.visible=false,肯定会很happy,这就需要.sync修饰符来帮忙了。

  父组件已经定义  :dialogVisible.sync="visible",

  那么子组件当中: this.$emit("update:dialogVisible", false);   这里的dialogVisible就是我们自定义的属性名称,也就是myPropName,emit传递回去的false也就是需要在点击“取消”按钮之后,需要将visible修改成的值。

  是不是能够理解.sync修饰符了呢!

  

vue中.sync 修饰符的更多相关文章

  1. Vue中.sync修饰符

    Vue 中 sync的作用 <FatherComponent :a.sync = 'b'><FatherComponent /> 子组件中emit('update:a',... ...

  2. vue中.sync修饰符,实现子组件实时更新父组件的值

    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定. 不过它有一个前身,先来看看.sync出现之前是如何实现的 父组件中(传递给子组件一个值:p ...

  3. vue中的修饰符

    Vue2.0学习笔记:Vue事件修饰符的使用   事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理 ...

  4. vue 之 .sync 修饰符

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...

  5. vue的.sync 修饰符

    很多时候,我们会对 prop (父子组件传递数据的属性) 进行“双向绑定” 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会 ...

  6. [Vue]组件——.sync 修饰符实现对prop 进行“双向绑定”

    一.同时设置1个 prop 1.以 update:my-prop-name 的模式触发事件,如对于title属性: this.$emit('update:title', newTitle) 2.然后父 ...

  7. 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 027——VUE中事件修饰符:stop prevent self capture

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. VUE中事件修饰符:stop prevent self capture

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

随机推荐

  1. [Asp.net 5] ApplicationBuilder详解

    ApplicationBuilder(IApplicationBuilder接口),是OWIN的基础,而且里面都是代理.代理的代理,各种lambda表达式,估计要看这部分代码,很多人得头昏脑涨.今天就 ...

  2. 1.前端笔记之html

    title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 **出处:http://w ...

  3. MVC5使用SignalR进行双向通信(1)

    MVC5使用SignalR进行双向通信 (1) 配置Signal 在NuGet中通过 install-package Microsoft.AspNet.SignalR 命令进行安装 在Scripts文 ...

  4. 关于“学习Linux用什么系统”的解答

    首先,阐述一下,我个人的观点——这个问题我曾经也想了很久了,这绝不是长篇大论后就是简单一句,适合你的就是最好的.其实,很多人看到这一句,心里已经有成千上万个奔腾了(至少我当时是这样的),为什么?因为我 ...

  5. JQuery上传插件Uploadify API详解

    一.相关key值介绍uploader:uploadify.swf文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf. scrip ...

  6. crt 糟心的配置

    每次要下载安装crt就要捣鼓半天,各种注册机下来各种问题,顺手记录下刚打通的一个 1.crt 下载 网上看了一遍博客: SecureCRT 7.3.4破解版(含注册机), 下载下来后里面其实是不含注册 ...

  7. 深入探究VC —— 资源编译器rc.exe(3)

    Windows应用程序中,图标.菜单.畏途.图标.工具条.对话框等是以资源的形式存在的.开发人员也可以自定义资源类型.如果一个程序使用了资源,那么它在构建时需要对资源进行编译.程序所使用的资源会在资源 ...

  8. Python学习日记:day2

    1.格式化输出 name = input("请输入你的名字:") age =input("请输入你的年龄:") job =input("请输入你的工作 ...

  9. mongodb系列~mongodb集群介绍与管理

    mongodb 集群维护1 简介    谈谈mongodb的集群架构2 常用的维护命令   1 查看状态 sh.status()         1 version        2 shards: ...

  10. emp架构

    https://wenku.baidu.com/view/5fac8d037e21af45b207a852.html https://wenku.baidu.com/view/f2faa36fa451 ...