sync修饰符的原理和作用

其实就是语法糖，效果很妙
首先简单复习一下Vue中父子路由传值

// 父组件给子组件传入一个函数
<MyFooter :age='age' @setAge='(res) => age = res' ></MyFooter>

// 子组件通过调用这个函数来实现修改父组件的状态
mounted () {
    console.log(this.$emit('setAge', 123456));
}

用.sync修饰符

// 父组件将age传给子组件并使用.sync修饰符
<MyFooter :age.sync='age' ></MyFooter>

// 子组件触发事件
mounted () {
    console.log(this.$emit('update:age', 1234567));
}

事件名被换成 update:age
update:是被固定的也就是Vue为我们约定好的名称部分
age是我们要修改的状态的名称，是我们手动配置的，与传入的状态名字对应起来

注意：
必须在执行名称前加上 update: 的前缀才能正确触发事件。