vue中sync修饰符怎么用

Question

看不懂红框中的代码：1.update:foo是监控事件的事件名吗？ 2.事件update:foo触发后执行的val=>bar=val是什么意思？ 3.$emit触发update:foo事件后传的参数newValue是传给val了还是其他？ 4.<comp :foo.sync="bar">是指加入了sync这个修饰后就可以实现下面同样代码的功能了吗（语法糖） 初学者，问题可能比较低端，方便的话可以答的详细些吗...见笑了

Answer 1

正常来说，vue2是不允许子组件直接改父组件传进去的值的。
关于vue的数据传递可以看这个
所以我们需要在子组件内定义自定义事件，通知父组件需要改值了。

// 父
<template>
    //    传入val props  绑定事件change
    <child :foo="val1" @update:foo="changeVal">
</template>
methods:{
    changeVal(val) {
        this.val1 = val
    }
}
//子
在某个操作中触发被绑定的change事件，通知父组件修改
this.$emit('update:foo', 'newVal')

那么使用sync修饰符，就是简化了这一过程,
父组件直接这么写就行了，子组件还是需要触发的

<template>
    //    传入val props，使用sync修饰符  不用绑定事件change
    <child :foo.sync="val1">
    // 也不用定义method了
</template>

语法糖就是这个意思，让你少写代码的。

---

val=>bar=val这是箭头函数

function (val) {
    this.bar = val
    // 在vue的表达式里不用this
    // 即 bar = val
}

Answer 2

1. 是事件名
2. 更换当前的bar属性值为传过来的值
3. 对
4. 等同于上面的操作