如何理解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 call和apply方法
Nov 24 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
Javascript执行流程细节原理解析
May 14 Javascript
vue.js封装switch开关组件的操作
Oct 26 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
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
JavaScript中String.prototype用法实例
2015/05/20 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python使用tornado实现简单爬虫
2018/07/28 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
Python3 assert断言实现原理解析
2020/03/02 Python
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
军人违纪检讨书
2014/02/04 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
社团活动总结书
2014/06/27 职场文书
迎七一演讲稿
2014/09/12 职场文书
委托书的写法
2014/09/16 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
党支部工作总结2015
2015/04/01 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
新手入门Mysql--sql执行过程
2021/06/20 MySQL
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python