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 相关文章推荐
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
js中this的用法实例分析
Jan 10 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
JavaScript中的Function函数
Aug 27 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
JS实现关闭小广告特效
Jan 29 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
php实现的农历算法实例
2015/08/11 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
js停止输出代码
2008/07/20 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
js自定义事件代码说明
2011/01/31 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
自己使用总结Python程序代码片段
2015/06/02 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
低碳生活倡议书
2014/04/14 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
县级文明单位申报材料
2014/05/23 职场文书