vue中 .sync 和 v-model 的区别

        自定义组件的 v-model .sync 修饰符其实本质上都是vue的语法糖,用于实现父子组件的“数据”双向绑定.

        Vue中的 props 是单向向下绑定的,即:每次父组件更新时,子组件中的所有 props 都会刷新为最新的值。但是如果在子组件中修改 props ,Vue会向你发出一个警告、报错,这就形成了一个单向数据流。因此我们可以在父组件使用子组件的标签上声明一个监听事件,在子组件想要修改时使用 $emit 触发事件并传入新的值,让父组件进行修改。

.sync修饰符

        .sync 修饰符添加于 v 2.4,其实就是父组件监听子组件更新某个props的请求的缩写语法

 例如:

这段代码用 .sync 修饰符写的话:

子组件中,可以通过下面代码来实现对这个prop重新赋值的意图:

this.$emit('update:title', newTitle)

 当我们想一个对象同时设置多个 prop 的时候,也可以将这个. sync 修饰符和 v-bind 配合使用:

        这样会把doc对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on 监听器。 

v-model本质

        v-model是用来在表单控件或者组件上创建双向绑定的,他的本质是v-bindv-on的语法糖,在一个组件上使用v-model,默认会为组件绑定名为valueprop和名为input的事件。


父组件:



 子组件:



       .sync 从功能上看和 v-model 十分相似,都是为了实现数据的“双向绑定”,本质上,也都不是真正的双向绑定,而是语法糖

        相比较至下,.sync 会更加灵活,它可以给多个prop使用

        从语义上来看,v-model 绑定的值是指这个组件的绑定值,比如 input 组件,select 组件,日期时间选择组件,颜色选择器组件,这些组件所绑定的值使用 v-model 比较合适。其他情况,没有这种语义,个人认为使用 .sync 更好。

        两者都需要手动触发 $emit 方法.

你可能感兴趣的:(vue,html5,vue.js,html)