用 .sync 方法实现 Vue 父子组件传值双向绑定

父子组件传值，在父组件中传入，子组件中 props 接收
举个例子：

// 父组件中引用子组件，并将 addUserInfo 传入子组件
<add-user :addUserInfo="addUserInfo" />

// 子组件中接收 addUserInfo 
props: {
    addUserInfo: {
        type: Boolean,
        default: false
    }
}

子组件中使用时 this.addUserInfo 可以直接拿到父组件中传入的值，但是在子组件中不能直接修改 addUserInfo ，因为addUserInfo是父组件中传下来的，需要在父组件中修改他的值。

官方文档解释是：
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

所以在修改时，需要 $emit 发送一个事件，父组件接收到后在父组件中去操作

// 子组件中
this.$emit('changeAddUserInfo', false)

// 父组件中接收到，在methods中写一个子组件发送上来的方法
<add-user :addUserInfo="addUserInfo" @changeAddUserInfo="changeAddUserInfo"/>

methods: {
	changeAddUserInfo (val) {
		console.log(val) // 打印结果为 false
		this.addUserInfo = val
	}
}

这样就完成了对 addUserInfo 的修改，接下来简化一下，使用 sync 来修饰一下父组件
将子组件发送时

this.$emit('changeAddUserInfo', false)
// 改变一下
this.$emit('update:addUserInfo', false)

父组件接收时

<add-user :addUserInfo="addUserInfo" @changeAddUserInfo="changeAddUserInfo"/>
// 改变一下
<add-user :addUserInfo="addUserInfo" @update:addUserInfo="changeAddUserInfo"/>
// 最后父组件中传值方法 :addUserInfo 和 @update:ddUserInfo 简化一下
<add-user :addUserInfo.sync="addUserInfo"/>

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 :title.sync = " doc.title + ‘!’ " 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model，也就是说sync只能绑定值，不能去执行一个方法

所以 父组件中 changeAddUserInfo 方法就可以删除了，sync 会自动把 子组件中 emit 发送上来的值，赋值给绑定的那个参数