11-30 v-model和.sync修饰符的区别

在日常开发的过程中,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可以有多个。