在日常开发的过程中,v-model指令是经常用到的,一般来说 v-model 指令在表单及元素上创建双向数据绑定,但 v-model 本质是语法糖。但提到语法糖,这里就不得不提另一个与v-model有相似功能的双向绑定语法糖了,这就是 .sync修饰符。在这里就两者的使用进行一下总结:
一、v-model
1. 作用
相信使用过vue框架的朋友对这个指令不会感到陌生,v-model是用来进行<input>
、<textarea>
及 <select>
元素上数据的双向绑定的
例如:
<template>
<div>
<input v-model="value" type="text"> //这里的v-model里面的value可以直接获取到用户的输入值
</div>
</template>
<script>
import son from '@/yanshi/son.vue'
data() {
return {
value: '' //这里定义的value变量可以直接将上面获取到的值进行操作
}
}
}
</script>
复制代码
当我们在input
输入框里面输入了某个在值的时候,下面就可以直接获取到我们的输入值,而不需要操作dom元素进行获取
二 .sync修饰符作用
相比较与v-model
来说,sync
修饰符就简单很多了:
.sync修饰符可以实现子组件与父组件的双向绑定,并且可以实现子组件同步修改父组件的值。
.sync与v-model区别是
相同点:都是语法糖,都可以实现父子组件中的数据的双向通信。
区别点:格式不同:v-model=“num”, :num.sync=“num”
v-model:@input + value
:num.sync: @update:num
另外需要特别注意的是: v-model
只能用一次;.sync
可以有多个。