v-model和.sync详解和区别

一、v-model

介绍

vue中一般用于表单绑定值的时候，我们会用到一个v-model的指令，它可以在表单以及元素上面创建双向绑定数据。

原理

但是其实 v-model 是一个[语法糖]，应用于组件，它真实的实现是这样的。

<input v-model="val" type="text">
//本质
<input :value="val"  @input="val=$event.target.value" />

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

使用

父子组件之间数据的双向绑定

//  parent组件，也就是我们的父组件
<template>
  <div>
    <son v-model="name"/>
  </div>
</template>
<script>
import son from './son.vue'  
export default {
  components: {son},
  data() {
    return {
      name:"父组件"
    }
  }
}

// son 组件，也就是我们的子组件
<template>
  <div>
    {{ value }} 
    // 父组件绑定的v-model的值
  </div>
</template>
<script>
export default {
// 这里必须用value名称，换成其他的无效
  props: {
    value: {
      type:String,
      required: true
    }
  }
}

注意：由于vue是单向数据流的，所以我们不能在子组件中直接修改value值，根据我们的经验，一般我们会通过在子组件中使用$emit('input',值)的方法将值传入父组件。

<template>
  <div>
    <div @click="$emit('input','更改的值')"></div>
  </div>
</template>

二、.sync

介绍

.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

原理

.sync应用于组件，其实是 :属性名 和 @update:属性名 的简写；
如果希望子组件，可以直接通过触发事件，就更新prop值，就可以添加 sync 修饰符

<mySon :name="money" @update:name="name= $event"></mySon> 
<mySon:name.sync="money" :age.sync="age"></mySon> 
this.$emit('update:name', 值)
this.$emit('update:age', 值)
.sync 可以多次使用

// 父组件
<template>
  <div>
    <my-son :name.sync="name" /> 
  </div>
</template>
<script>
import mySon from "./components/mySon.vue"
export default {
  components: {
    mySon
  },
  data () {
    return {
      name: '父组件内容',
      age:18
    };
  },
}
</script>

// 子组件
<template>
  <div @click='changeName'>
    {{name}}
  </div>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    age: {
      type: Number,
      default: ''
    },
  },
  methods: {
    changeName () {
      this.$emit('update:name', '更改的内容')
      this.$emit('update:age', '更改的内容') 
    }
  },
}
</template>

三、v-model与.sync区别

1.相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。
​ 区别在于往回传值的时候. sync 的 $emit 所调用的事件名必须是`update:属性名。
2.格式不同：v-model=“num”, :num.sync=“num”
​ v-model： @input + value
​ :num.sync: @update:num
3.v-model只能用一次；.sync可以有多个