首页 > 其他 > 详细

08.双向绑定和单向数据流不冲突

时间:2020-04-27 00:40:39      阅读:116      评论:0      收藏:0      [点我收藏+]


技术分享图片

技术分享图片

技术分享图片


技术分享图片
这是一个个人信息的demo
技术分享图片
输入手机号和邮编
技术分享图片
这是两个组件,两种不同的写法
第一种是通过v-model进行的双向绑定
技术分享图片

第二种是属性的传递,事件的回调。去做数据的更新。
技术分享图片
实际上v-model的形式,就是我们第二种方式,最终编译出来的效果。
技术分享图片
所以v-model仅仅是语法糖而已。
有时候一个组件需要多个属性的双向绑定,vue给我们预留了api。通过.sync的形式。可以对其他的属性去做双向绑定。
技术分享图片
.sync其实下面这种:zipcode这样的一种形式去传递去改变值,
技术分享图片
技术分享图片

子组件更新的时候也是通过this.$emit 触发事件这样去做的。
技术分享图片
v-model用的是@change
技术分享图片
为什么是@change呢?实际上是我们子组件自己定义的

正常情况下vue默认的是input事件
技术分享图片
对于属性默认的是value
技术分享图片
如果你需要自定义,例如这里我们要对phoneinfo做双向绑定,那我可以在model中主动的声明。声明我这个属性要的是phoneinfo然后事件是用的change,这样我们的双向绑定就是按照机制去来的。
技术分享图片
最终的语法糖的形式
技术分享图片
v-model对应的是前两个
技术分享图片
.sync对应的是后面两个。
技术分享图片

课后习题

技术分享图片
 

结束



 

08.双向绑定和单向数据流不冲突

原文:https://www.cnblogs.com/wangjunwei/p/12783720.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!