vue中对于.sync修饰符的理解

父组件
<span>{{count}}</span>
<Son :son.sync="count"></Son> 
export default {
  name: '',
  data() {
    return {
     count:''
   }
  },
  created() {}
}
子组件
<template>
  <div>
    <el-button @click="clickOne">{{son}}8888</el-button>
  </div>
</template>

<script>
export default {
  name: '',
  props: ['son'],
  data() {
    return {}
  },
  created() {},
  methods: {
    clickOne () {
      this.$emit('update:son', 4)
    }
  }
}
</script>

父组件
<span>{{count}}</span>
<Son :son="count" @update="count = $event"></Son>
export default {
  name: '',
  data() {
    return {
     count:''
   }
  },
  created() {}
}
子组件Son
<template>
  <div>
    <el-button @click="clickOne">{{son}}8888</el-button>
  </div>
</template>

<script>
export default {
  name: '',
  props: ['son'],
  data() {
    return {}
  },
  created() {},
  methods: {
    clickOne () {
      this.$emit('update', 3)
    }
  }
}
</script>

父组件：
 <Son :son="count" @update="update"></Son>
 export default {
  name: '',
  data() {
    return {
     count:''
   }
  },
  created() {},
  methods: {
  update (one) {
   this.count = one
  }
}
子组件：
<template>
  <div>
    <el-button @click="clickOne">{{son}}8888</el-button>
  </div>
</template>

<script>
export default {
  name: '',
  props: ['son'],
  data() {
    return {}
  },
  created() {},
  methods: {
    clickOne () {
      this.$emit('update', 3)
    }
  }
}

这三种实现的效果是一样的
.sync就是一个语法糖 是一个子组件可以改变从父组件接收的props值的语法糖
son.sync="count"相当于父组件中绑定了:son="count"子组件中触发
this.$emit(‘update:son’, 传值)
跟v-model的语法糖类似
只不过v-model默认的是value绑定触发的是input事件详见v-model demo的文章
https://blog.csdn.net/LRQQHM/article/details/114331998