如何理解Vue的.sync修饰符的使用


Posted in Javascript onAugust 17, 2017

本文介绍了Vue的.sync修饰符的使用,分享给大家,也给自己留个笔记

案例

<div id="app">
  <div>{{bar}}</div>
  <my-comp :foo.sync="bar"></my-comp>
  <!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> -->
</div>
<script>
  Vue.component('my-comp', {
    template: '<div @click="increment">点我+1</div>',
    data: function() {
      return {copyFoo: this.foo}
    },
    props: ['foo'],
    methods: {
      increment: function() {
        this.$emit('update:foo', ++this.copyFoo);
      }
    }
  });
  new Vue({
    el: '#app',
    data: {bar: 0}
  });
</script>

说明:代码<my-comp :foo.sync="bar"></my-comp>会被扩展成<comp :foo="bar" @update:foo="val => bar = val"></comp>,就是一个语法糖。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 #Javascript
js编写简单的聊天室功能
Aug 17 #Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 #Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 #Javascript
js实现方块上下左右移动效果
Aug 17 #Javascript
JavaScript中一些特殊的字符运算
Aug 17 #Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 #Javascript
You might like
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php cookie的操作实现代码(登录)
2010/12/29 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
Python入门学习之字符串与比较运算符
2015/10/12 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
教师校本培训方案
2014/02/26 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
内衣营销方案
2014/03/15 职场文书
小班开学寄语
2014/04/04 职场文书
社区综治工作汇报
2014/10/27 职场文书
2014年教务工作总结
2014/12/03 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
SQL Server中锁的用法
2022/05/20 SQL Server