你知道在Vue中, v-model和.sync的区别吗 ?

一: v-model : 

  首先我们知道,v-model 是Vue框架的一种内置的API指令，数据的双向绑定常用于用于表单验证,本质是一种语法糖写法。v-model 帮我们做的事就是，为 input 的 value 值设置一个动态绑定，然后在输入框的 input 事件触发后实时修改动态绑定的 value 的变量值。

他实际上包含了两个操作:

• v-bind绑定value属性
• v-on监听表单元素的输入事件，并改变数据

<template>
  <input v-model="msg" type="text">
  <p>{{ msg }}</p>
</template>

<script>
export default {
  data() {
    return {
      msg : ''
    }
  }
}
</script>

二: .sync原理:

   是在父子组件传值的，且子组件要修改这个数据的时候使用。它的原理是利用EventBus，子组件触发事件，父组件响应事件并实现数据的更新，避免由子组件直接修改父组件传过来的内容。

//子组件
<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"]
};
</script>

<style>
.child {
  border: 3px solid green;
}
</style>
//父组件
<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money="total" v-on:update:money="total = $event"/>
    用.sync修饰符修改
    <Child :money.sync="total"/>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

三: 二者区别 

1. v-model只能写一个,但是.sync可以写多个
2. v-model是 $emit("input",新值),.syncs是 $emit('update:属性名',新值)