vue 之 .sync 修饰符示例详解


Posted in Javascript onApril 21, 2018

在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”。

在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会同步到父组件中所绑定的值。

这很方便,但也会导致问题,因为它破坏了单向数据流。(数据自上而下流,事件自下而上走)

由于子组件改变 prop 的代码和普通的状体改动代码毫无区别,所以当你光看子组件的代码时,你完全不知道它合适悄悄地改变了父组件的状态。

这在 debug 复杂结构的应用时会带来很高的维护成本。于是我们在 vue 2.0 中移除了 .sync 。

但是在实际应用中,我们发现 .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 修饰符示例详解

 vue 之 .sync 修饰符示例详解vue 之 .sync 修饰符示例详解

原理就是父组件向子组件传递了一个函数:function (newValue) { this.msg = newValue; }

vue 之 .sync 修饰符示例详解

当使用一个对象一次性设置多个属性的时候,这个 .sync 修饰符也可以和 v-bind 一起使用。

例如:  <child  v-bind.sync = “{ message: msg, uC: uc}”></child>     (不能写成  :.sync="{*********}",否则会报错的)

这个例子会为 message 和 uC 同时添加用于更新的 v-on 监听器。

 

vue 之 .sync 修饰符示例详解vue 之 .sync 修饰符示例详解vue 之 .sync 修饰符示例详解

总结

以上所述是小编给大家介绍的vue 之 .sync 修饰符示例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
原生js实现吸顶效果
Mar 13 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 #Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 #Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 #jQuery
vue多页面开发和打包正确处理方法
Apr 20 #Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 #Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 #Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 #Javascript
You might like
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
多广告投放代码 推荐
2006/11/13 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
js实现表格筛选功能
2017/01/18 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
python字符串连接方法分析
2016/04/12 Python
Python+微信接口实现运维报警
2016/08/27 Python
微信跳一跳游戏python脚本
2020/04/01 Python
详解python while 函数及while和for的区别
2018/09/07 Python
python opencv实现证件照换底功能
2019/08/19 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
新学期决心书
2014/03/11 职场文书
学校门卫岗位职责
2014/03/16 职场文书
项目合作协议书
2014/04/16 职场文书
战略合作协议书范本
2014/04/18 职场文书
2015年元旦活动总结
2014/05/09 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技