如何理解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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
vue v-model动态生成详解
Jun 30 Javascript
js实现百度淘宝搜索功能
Feb 17 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实现天干地支计算器示例
2014/03/14 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
详细介绍Ruby中的正则表达式
2015/04/10 Python
Python连接phoenix的方法示例
2017/09/29 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Python编写单元测试代码实例
2020/09/10 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
幼儿园教师节活动方案
2014/02/02 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
年终考核实施方案
2014/05/26 职场文书
公司副总经理任命书
2014/06/05 职场文书
个人授权委托书范本
2014/09/14 职场文书
2015年女生节活动总结
2015/02/27 职场文书
高中地理教学反思
2016/02/19 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Django migrate报错的解决方案
2021/05/20 Python