一般情况下，子组件向父组件传值代码如下：

子组件Child.vue

<template>
  <div>
    <h2>我是子组件</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {},
  mounted: function () {
    this.$emit('getInfo', 20)
  }
}
</script>

<style>
</style>

父组件Father.vue

<template>
  <div>
    <h2>{{info}}</h2>
    <child @getInfo="showInfo"></child>
  </div>
</template>

<script>
export default {
  data () {
    return {
      info: ''
    }
  },
  methods: {
    showInfo (val) {
       = val
    }
  }
}
</script>

<style>
</style>

浏览器查看效果

这种写法比较复杂，所以引入了.sync修饰符，引入后的组件代码变化如下：

子组件Child.vue

<template>
  <div>
    <h2>我是子组件</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {},
  mounted: function () {
    this.$emit('update:info', 20)
  }
}
</script>

<style>
</style>

父组件Father.vue

<template>
  <div>
    <h2>{{info}}</h2>
    <child :info.sync="info"></child>
  </div>
</template>

<script>
export default {
  data () {
    return {
      info: ''
    }
  },
  methods: {

  }
}
</script>

<style>
</style>

解释说明：

• 子组件Child.vue的事件执行名称变成了update:info，而不是getInfo。其中update:是固定的前缀（是vue约定的名称前缀），而info是自定义的名称，也是要传给父组件的数据的名字。
• 父组件Father.vue中不需要绑定事件方法了，而是通过:info.sync="info"来直接接收这个值，当然需要在data中声明数据对象。其中两个info是相同的，都是在子组件中update后面的名称，必须和子组件中的名词保持一致，而.sync就是此次使用的修饰符了，是固定不变的。

二者的比较：

• 不使用.sync修饰符

• 使用.sync修饰符

实际上，可以通过.sync修饰符修改父组件中属性的值。