v-model 和 .sync 的区别和实现

目录

v-model

一、表单元素双向绑定

二、组件数据双向绑定

.sync

相同点：

区别点：

1.格式：

2.使用：

---

v-model

v-model 是value属性和input事件的语法（默认）

一、表单元素双向绑定

v-model是用来进行<input>、<textarea>、<select>元素上数据的双向绑定的

input 元素本身有个input 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 input 事件，把最新的value值传给传递给val ,完成双向数据绑定的效果。

PS：不是所有能进行双向绑定的元素都是input事件。

@input 数据变化    @change 数据变化+失去焦点

// 这里的v-model里面的value可以直接获取到用户的输入值
<input v-model="val" type="text"/>
// 等价于
<input :value="val"  @input="val=$event.target.value" />

data() {
   return {
     value: ''    // 这里定义的value变量可以直接将上面获取到的值进行操作
   }
 }

二、组件数据双向绑定

父组件中定义一个@input方法，再设置一个形参val接收子组件的传值

 <son v-model="num" @input="val=>num=val" />

子组件中使用$emit()方法，调用父组件中的事件，并且进行传值

 // 子组件接收值
 props: {
    value: {
      type: Number,
      required: true
    }
  }
 methods：{
    fn(){
      // 调用自定义事件
      $emit('input',this.value)
    }
  }

属性名和事件名可在model里进行修改

 model: {
    prop: {
      type: Number,
      required: true
    },
    event:''
  }

.sync

.sync 是自定义属性和update：自定义事件的语法糖

<Sub :num.sync="num"/>
// 等价于
<Sub :num="num" @update：num="num=$event"/>

// 加上sync之后父传子： 
// x属性名 num属性值
<son :x.sync="num"/>
// 等价于
// 相当于多了一个事件监听，事件名是update:x
// 回调函数中，会把接收到的值赋值给属性绑定的数据项中。
<son :x="num" @update:x="val=>num=val"/>

相同点：

都是语法糖，都可以实现父子组件中的数据的组件通信，数据双向绑定（子向父传，父向子改）

区别点：

1.格式：

v-model    v-on:input + v-bind:value
:num.sync  v-on:update:num + v-on:num

2.使用：

v-model一个组件上只能使用一次，.sync能使用多次