Vue父子组件传值之.sync

首先，讲讲.sync的来历，在项目中常有父子组件传值，子组件修改父组件数据的需求，而Vue是不允许子组件直接修改操作的，直接红牌警告：

于是乎，有了以下操作：

1. 子组件在props中声明，与父组件商量好的传值暗号xxx（用来作为传递值的别名）
2. 子组件通过触发一个事件来告诉父组件：“我要改xxx对应的值！”（this.$emit('update: value', this.xxx=yyy)）
3. 父组件在引用子组件时，在其标签内通过:xxx='local_value' @update:value='local_value = $event'来监听update:value事件，对更改请求作出响应
4. local_value的值更改为yyy

这是我的实验沙盒链接，可以点击进来看看完整代码
例子中，msg对应xxx，parent对应local_value，update:value其实是一个字符串，只要父子组件对应即可，不强制要求，但官方建议写为’update:value’，大概是为了语义性吧~

而.sync是用来简化第3步操作的：:xxx.sync = 'local_value'