v-model和 .sync
1、v-model的双向数据绑定其实是一个语法糖,类似于,给子组件传入一个value值,并且监听子组件的input事件,在这个事件里将子组件传过来的新值赋值给父组件的value
<Input v-model="username">
//同于下:
<Input :value="username" @input="username=$event">
//在子组件里面需要接收value属性,并绑定input事件
//子组件
//props选项:
注:v-model的语法糖的默认传递的属性是value,默认监听的事件是input事件
当然,默认属性和默认事件可以在子组件中自定义,如下:
//Input.vue子组件中有一个model选项可以用来自定义v-model的默认属性和事件(vue2.4以上的版本中新加的)
{
model:{
prop:'checked', //传递的属性
event:'change' //监听的事件
} }
这样在子组件中,就可以结束checked属性值,和绑定change事件了
2、.sync修饰符和v-model实现的效果是相像的,只是.sync的绑定事件是不变的,也不能自定义的,必须是update:属性名;但是传入的属性是可以随意定义的,只要和事件update后面的参数保持一致就行了
<Input :aaa.sync="username">
//如同下
<Input :aaa.sync="username" @update:aaa="username = $event">
//这样也能实现数据的双向绑定
此时子组件中,子组件绑定的事件的$emit的事件也必须是update:aaa
this.$emit("update:aaa,false);
这样在父组件中才能监听到子组件的变化
总结一下:v-model是比较灵活的,它有默认的属性和事件,也可以自定义指定,比较方便;相比下,sync的事件就是固定不变的了,无法自定义
v-model和 .sync的更多相关文章
- sync—WaitGroup
用途:阻塞主线程的执行,直到所有的goroutine执行完成 WaitGroup总共有三个方法:Add(delta int),Done(),Wait().简单的说一下这三个方法的作用. Add:添加或 ...
- backbone库学习-model
backbone库的结构: http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html 本文所有例子来自于http://blog.cs ...
- 【再探backbone 01】模型-Model
前言 点保存时候不注意发出来了,有需要的朋友将就看吧,还在更新...... 几个月前学习了一下backbone,这段时间也用了下,感觉之前对backbone的学习很是基础,前几天有个园友问我如何将路由 ...
- backbone.Model 源码笔记
backbone.Model backbone的model(模型),用来存储数据,交互数据,数据验证,在view里面可以直接监听model来达到model一改变,就通知视图. 这个里面的代码是从bac ...
- 什么是V模型?使用SDLC和STLC学习案例研究
本教程详细介绍了软件/系统开发生命周期(SDLC),如瀑布循环和迭代循环,如RAID和Agile.此外,它继续解释测试的V模型和STLC(软件测试生命周期). 假设为您分配了一项任务,即为客户开发自定 ...
- 【原创】backbone1.1.0源码解析之Model
趁热打铁,将Backbone.Model的源代码注释也发出来. Model是用来干嘛的?写过mvc的同学应该都知道,说白了就是model实例用来存储数据表中的一行数据(row) Backbone利用m ...
- Backbone Model 源码简谈 (版本:1.1.0 基础部分完毕)
Model工厂 作为model的主要函数,其实只有12行,特别的简练 var Model = Backbone.Model = function(attributes, options) { va ...
- sync.Map(在并发环境中使用的map)
sync.Map 有以下特性: 需要并发读写时,一般的做法是加锁,但这样性能并不高,Go语言在 1.9 版本中提供了一种效率较高的并发安全的 sync.Map,sync.Map 和 map 不同,不是 ...
- Golang Sync.WaitGroup 使用及原理
Golang Sync.WaitGroup 使用及原理 使用 func main() { var wg sync.WaitGroup for i := 0; i < 10; i++ { wg.A ...
- 不可错过的效能利器「GitHub 热点速览 v.22.39」
如果你是一名前端工程师且维护着多个网站,不妨试试本周榜上有名的 HTML-first 的 Qwik,提升网站访问速度只用一招.除了提升网站加载速度的 Qwik,本周周榜上榜的 Whisper 也是一个 ...
随机推荐
- 论文翻译:Data mining with big data
原文: Wu X, Zhu X, Wu G Q, et al. Data mining with big data[J]. IEEE transactions on knowledge and dat ...
- Windows环境:VMware下linux虚拟机与Windows主机进行文件共享的方法
转载至:https://blog.csdn.net/kai1001/article/details/79668327 感谢原作者的分享 操作主要分两大步骤: 一.是对主机进行配置: 二.是在虚拟机上安 ...
- Django---Django中使用COOKIE和SESSION
Django---Django中使用COOKIE和SESSION 一丶Cookie cookie的由来 # HTTP协议是无状态的. # 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请 ...
- HTML5实现无刷新修改URL
前言 今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的. 我 ...
- 渗透 Facebook 的思路与发现
0x00 写在故事之前 身一位渗透测试人员,比起 Client Side 的弱点,我更喜欢 Server Side 的攻击,能够直接控制服务器并获得权限操作 SHELL 才爽 . 当然一次完美的渗透出 ...
- 阿里云ECS使用vnc远程连接(Ubuntu + CentOS)
阿里云ECS使用vnc远程连接https://blog.csdn.net/m0_37264397/article/details/78271896 在Linux实例上自动安装并运行VNC Server ...
- JavaFX 井字棋游戏
利用JavaFX设计一个井字棋游戏,其中包括了能够与玩家对战的AI.AI的实现相比五子棋来说要简单得多,可以保证AI在后手情况下绝对不会输,具体实现如下: /* * To change this li ...
- BigDecimal加减乘除计算
一.简述 java.math.BigDecimal不可变的.任意精度的有符号十进制数.BigDecimal 由任意精度的整数非标度值(unscaledValue)和32位的整数标度(scale)组成. ...
- 项目Beta冲刺(团队)——05.27(5/7)
项目Beta冲刺(团队)--05.27(5/7) 格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺(团队) 团队名称:为了交项目干杯 作业目标:记录Beta敏捷冲刺第5 ...
- DT系统开发之-在线询盘信息的调取实现
调用标签 <!--{tag("table=message&condition=status=3 and typeid=1&areaid=$cityid&cati ...