你确定你知道语法糖v-model .sync之间的区别吗？

1. v-model作用:  v-model本质上是一个语法糖，v-model用于父子组件之间相互通信的一种方法 ,如果用传统的通过在子组件中的this.$emit通知父组件去$on去监听这个事件会很麻烦,v-model相对于更便捷一些

2. v-model原理: <input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">，其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的

eg: <div id="app">
  <input v-model="test">
  <!-- <input :value="test" @input="test= $event.target.value"> --><!--语法糖-->
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      test: '这是一个测试'
    }
  });
</script>

3. .sync作用: 实现父子组件数据之间的双向绑定，与v-model类似。这个修饰符就是vue封装的  子组件要修改父组件传过来的动态值的语法糖，省去了父组件需要写的方法，但是子组件emit时要加上update

4. .sync修饰符的原理:

// 正常父传子： 
<com1 :a="num" :b="num2"></com1>

// 加上sync之后父传子： 
<com1 :a.sync="num" .b.sync="num2"></com1> 

// 它等价于
<com1 
  :a="num" @update:a="val=>num=val"
  :b="num2" @update:b="val=>num2=val"></com1> 

// 相当于多了一个事件监听，事件名是update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。

 详细如下：

// 这里父组件，要给子组件传一个title的值
<template>
    <div>  
        <t-title :title.sync="fatherTitle"></t-title>
    </div>
</template>
<script>
import tTitle from './blocks/list';
export default {
    name: 'test1',
    components: {  tTitle },
    data() {
        return {
            fatherTitle: '父组件给的标题'
        };
    },
}
</script>

// 子组件
<template>
    <div>
        <h3>{{ title }}</h3>
        <button @click="changeTitle">改变</button>
    </div>
</template>
<script>
export default {
    props:{
        title: {type: String, default: '默认值11'}
    },
    methods: {
        changeTitle() {
            this.$emit("update:title", "子组件要改自己的标题");
        }
    }
};
</script>

这里关键就是emit里的参数要写成'update'+ ':' +'要修改的props'

5. sync与v-model区别是

   相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。

   区别点：

    -   格式不同。 `v-model="num", :num.sync="num"`
    -   v-model： @input + value
    -   :num.sync: @update:num
    -   v-model只能用一次；.sync可以有多个。