vue中的 .sync 和 v-model 的区别对比
自定义组件的 v-model
和 .sync
修饰符其实本质上都是vue的语法糖,用于实现父子组件的“数据”双向绑定。
Vue中的 props
是单向向下绑定的,即:每次父组件更新时,子组件中的所有 props
都会刷新为最新的值。但是如果在子组件中修改 props
,Vue会向你发出一个警告、报错,这就形成了一个单向数据流。因此我们可以在父组件使用子组件的标签上声明一个监听事件,在子组件想要修改时使用 $emit
触发事件并传入新的值,让父组件进行修改。
.sync修饰符
.sync
修饰符添加于 v 2.4,其实就是父组件监听子组件更新某个props
的请求的缩写语法。
例如:
<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event" ></text-document>
这段代码用 .sync
修饰符写的话:
<text-document v-bind:title.sync="doc.title"></text-document>
子组件中,可以通过下面代码来实现对这个prop重新赋值的意图:
this.$emit('update:title', newTitle)
当我们想一个对象同时设置多个 prop 的时候,也可以将这个 .sync
修饰符和 v-bind
配合使用:
<text-document v-bind.sync="doc"></text-document>
这样会把doc
对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on 监听器。
v-model本质
v-model
是用来在表单控件或者组件上创建双向绑定的,他的本质是v-bind
和v-on
的语法糖,在一个组件上使用v-model
,默认会为组件绑定名为value
的prop
和名为input
的事件。
<input type="text" :value="name" @input="name=$event.target.value"> <!--等同于<input type="text" v-model="name">-->
父组件:
<template> <div class=""> <p>{{ name }}</p> <son v-model="name"></son> <!--等同于 <son type="text" :value="name" @input="name=$event"/> --> </div> </template> <script type="text/javascript"> import Son from "./components/son"; export default { name: "", data() { return { name: "sheben", }; }, components: { Son, }, }; </script>
子组件:
<template> <div class> <input type="text" :value="value" @input="$emit('input', $event.target.value)" /> </div> </template> <script type="text/javascript"> export default { name: "", props: { value: { type: String, defalut() { return ""; }, }, }, data() { return {}; }, components: {}, }; </script>
.sync
从功能上看和v-model
十分相似,都是为了实现数据的“双向绑定”,本质上,也都不是真正的双向绑定,而是语法糖。
相比较至下,.sync
会更加灵活,它可以给多个prop使用。
从语义上来看,v-model
绑定的值是指这个组件的绑定值,比如input组件,select组件,日期时间选择组件,颜色选择器组件,这些组件所绑定的值使用v-model
比较合适。其他情况,没有这种语义,个人认为使用.sync
更好。
两者都需要手动触发$emit
方法。
原文:点击这里
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » vue中的 .sync 和 v-model 的区别对比