今天就让你弄懂.sync与v-model的区别

.sync与v-model的相同点是他们都是语法糖,都能实现父子组件中的数据双向通信

.sync与v-model的不同点有以下几点:

1.格式的不同

v-model='num',  :num.sync='num'

v-model：    @input + value

:num.sync:    @update:num

详情可以看下图

2.用法的不同,v-model由于事件只能绑定value,所以它只能用一次,而.sync是一个修饰符,可以在多个事件后面添加,所以.sync是可以有多个.

下图就是我对两个语法糖用法的一点见解

<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}
      <p>{{ $store.state.user.token }}</p>
      <mycom @click="fn" />
      <!-- 自定义属性必须要在组件内抛出这个事件
       @click="$emit('click')" -->
      <mycom @click.native="fn" />
      <!-- <div @click="fn">111</div> -->

      <my-com-1 v-model="num" />
      <!-- v-model语法糖等于下面的写法,
      :value表示传给子组件的变量名称
      num表示在父组件的data中定义的变量
      @input表示接收子组件抛出的事件名 -->
      <my-com-1
        :value="num"
        @input="val=>num=val"
      />

      <my-com-2 :a.sync="age" />
      <!-- :a.sync这个写法等于下面的写法 -->
      <!-- :a表示传给子组件的素组变量的名称,子组件用props来接收
      .sync是一个修饰符,让:a这个事件能有语法糖的作用
      age表示在父组件的data中定义的变量,也就是要传给子组件的具体值 -->
      <my-com-2 :b="age" @update:b="val=>age=val" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import mycom from './mycom.vue'
import MyCom1 from './MyCom1.vue'
import MyCom2 from './MyCom2.vue'

export default {
  name: 'Dashboard',
  components: { mycom, MyCom1, MyCom2 },
  data: function() {
    return {
      num: 100,
      age: 18
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    fn() {
      alert(1)
    }
  }
}
</script>

<template>
  <div @click="fn">
    {{ value }}
    <!-- 可以用{{value}}的形式在组件中显示父组件传过来的值 -->
  </div>
</template>

<script>
export default {
  props: {
    value: {
      // value表示子组件接收父组件传过来的数组变量名称
      type: Number,
      required: true
    }
  },
  methods: {
    fn() {
      this.$emit('input', 200)
      // input是抛出一个事件,绑定父组件的事件名@input,
//可以在这个里面修改父组件传的变量value的值
    }
  }
}
</script>

<template>
  <div>

    <div @click="fn">{{ a }}</div>
    <div @click="fn1">{{ b }}</div>
  </div>
</template>

<script>
export default {
  props: {
    a: {
      // a表示接收父组件传过来的变量的名称
      type: Number,
      required: true
    },
    b: {
      type: Number,
      required: true
    }
  },
  methods: {
    fn() {
      this.$emit('update:a', 11)
      // update:a表示抛出一个事件a,在父组件中用:a.sync来绑定这个事件
//,可以在这里修改变量a的值并同步到父组件,语法糖.
    },
    fn1() {
      this.$emit('update:b', 12)
    }
  }
}
</script>