vue 修饰符sync详解

在vue1.0版本的时候就有sync,但是在2.0后就去除了,当更新到 2.3.0后又发现这个功能其实挺有用的,后来又加了这个功能。那么问题来着这个修饰符是干嘛的呢?其实这个更新父组件数据的语法糖,当子组件更改了父组件传的数据,然后父组件要及时响应。

废话不多说,上代码:

<pcon :foo.sync="bar" />

如果展开来就是

<pcom :foo="bar " @update:foo="val=>bar=val" />

注:这里的“val=>bar=val”为es6的写法,表示把从子组件传过来的值赋值给bar,并返回bar,类似于:

function(val){  return bar = val }

当子组件要更新父组件的数据时候,我们只需要发送请求:

this.$emit('update:foo', newValue)

就可以更新到父组件的值。

综上所述:

当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。如果我们不用.sync,我们也可以props传初始值,然后事件监听,实现起来也不算复杂。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Scala与Java的关系 Scala与Java的关系是非常紧密的!! 因为Scala是基于Java虚拟机,也就是...
    灯火gg阅读 3,515评论 1 24
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,099评论 19 139
  • 一般来说,爱猫人士会把自己比喻成喵咪大人的铲屎官,以表达对喵咪的敬仰之情(误)。正如有人所说,猫咪对你做什么,雷霆...
    最美应用阅读 735评论 0 8
  • 一场大雪 终是停了// 坟头上的晶莹 若能消融 洗净 生前所有不甘// 雪是停了 但那黑色枷锁 囚禁 灵魂的解脱/...
    红尘红尘阅读 174评论 0 0
  • react开发需要掌握的相关技术 1.了解node Node.js 是一个基于 Chrome V8 引擎的 Jav...
    zhan81649阅读 242评论 0 1