vue父子间的那些事儿——.sync修饰符与$emit(update:xxx)实现父子prop双向绑定

场景：需要对prop进行“双向绑定”

如：父级里有一个的弹出框状态，需要根据子级里表单的验证情况来控制是否要展开。

父组件页面代码

 <parent :checkstatus.sync="dialogFormVisible"></parent>

.sync修饰符的作用

vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对prop进行“双向绑定”。这个时候，就可以用.sync来解决,利用EventBus，当子组件触发事件时，父组件会响应事件并实现数据更新，避免了子组件直接修改父组件传过来的内容。

子组件页面情况

  /*表单校验状态：*/ 
  @Prop({default:false}) checkstatus!:boolean;
  ..........
  /**
   * 关键性代码上场， 
   * 这么操作可以直接更新父级的checkstatus对应的dialogFormVisible的值。
   * 而不需要用事件去接数据
   * 配合.sync语法糖。
   */ 
  this.$emit('update:checkstatus',true);