vue的.sync 修饰符
很多时候,我们会对 prop (父子组件传递数据的属性) 进行“双向绑定”
在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会同步到父组件中所绑定的值。
这很方便,但也会导致问题,因为它破坏了单向数据流。(数据自上而下流,事件自下而上走)
由于子组件改变 prop 的代码和普通的状体改动代码毫无区别,所以当你光看子组件的代码时,你完全不知道它合适悄悄地改变了父组件的状态。
这在 debug 复杂结构的应用时会带来很高的维护成本。于是我们在 vue 2.0 中移除了 .sync 。
我们需要做的只是 让子组件改变父组件状态的代码更容易被区分。
于是从 vue 2.3.0 开始,我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。他会被自动扩展为一个 自动更新父组件属性的 v-on 监听器。
<child :foo.sync=”msg”></child> 就会被扩展为: <child :foo=”bar” @update:foo=”val => bar = val”> (@是v-on的简写)
当子组件需要更新 foo 的值的时候,他需要显示的触发一个更新事件: this.$emit( “update:foo”, newValue );
vue的.sync 修饰符的更多相关文章
- vue 之 .sync 修饰符
在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...
- vue中.sync 修饰符
一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...
- [Vue]组件——.sync 修饰符实现对prop 进行“双向绑定”
一.同时设置1个 prop 1.以 update:my-prop-name 的模式触发事件,如对于title属性: this.$emit('update:title', newTitle) 2.然后父 ...
- vue中.sync修饰符,实现子组件实时更新父组件的值
vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定. 不过它有一个前身,先来看看.sync出现之前是如何实现的 父组件中(传递给子组件一个值:p ...
- Vue中.sync修饰符
Vue 中 sync的作用 <FatherComponent :a.sync = 'b'><FatherComponent /> 子组件中emit('update:a',... ...
- Vue sync修饰符的使用
父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue .sync修饰符
.sync 修饰符 对一个 prop 进行“双向绑定”时,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 那这个修饰符的原理是什么呢?其实还是vu ...
- Vue中v-model解析、sync修饰符解析
上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...
随机推荐
- 红帽虚拟化RHEV-安装RHEV-M
目录 目录 前言 软件环境 时间同步 更新系统 安装并配置RHEV-M 添加域并为用户授权远程登陆 安装rhevm报告 安装Spice协议 最后 前言 在红帽虚拟化RHEV-架构简介篇中介绍了RHEV ...
- 阶段3 1.Mybatis_06.使用Mybatis完成DAO层的开发_4 Mybatis中使用Dao实现类的执行过程分析-查询方法
delete方法没有并SqlSession的delete方法,而是调用的Upadte方法. 在测试类这里加断点. 实际的方法体内也加断点 运行测试方法,选择debug的方式 走到断点这里.会看到fac ...
- 【SD系列】SAP SD凭证处理被批次处理冻结
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[SD系列]SAP SD凭证处理被批次处理冻结 ...
- Javascript实现的图片隐写术
javascript图片隐写术,感觉可以用它来干点有想法的事情 1.什么是图片隐写术? 权威的wiki说法是“隐写术是一门关于信息隐藏的技巧与科学,所谓信息隐藏指的是不让除预期的接收者之外的任何人 ...
- 复制/etc目录下所有以p开头,以非数字结尾的文件或目录到/tmp/mytest1目录中
cp -r /etc/p*[a-Z] /tmp/mytest1
- base64 换表 解密脚本
做逆向经常遇到换表的base64 有了py脚本 一切都好说: import base64 import string str1 = "x2dtJEOmyjacxDemx2eczT5cVS9f ...
- python虚拟环境virtualenv创建与迁移
1.安装virtualenv pip install virtualenv #(python2) pip3 install virtualenv #(python3) 2.创建venv virtual ...
- 2017沈阳区域赛Infinite Fraction Path(BFS + 剪枝)
Infinite Fraction Path Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 262144/262144 K (Java ...
- 程序员听到bug后的N种反应…
程序员的世界里, 不止有代码, 还有bug,bug,bug- 当出现bug时, 程序员们的反应是怎样的呢? 作者:苏小喵,来源:小花小画(微信号:hua-little) - END - 推荐阅读: 1 ...
- qt QUndoGroup的使用
最近项目中用到撤销,恢复功能.qt的demo中有一个例子,是类似于单文档的.而我的项目中是类似于多文档的项目,即可能要打开多个页面,不同的页面都有撤销恢复功能.这样的话,就要用到QUndoGroup类 ...