实现组件props双向绑定解决方案

注意： 子组件不能直接修改prop过来的数据，会报错

方案一：

1. 用data对象中创建一个props属性的副本

2. watch props属性 赋予data副本 来同步组件外对props的修改

3. watch data副本，emit一个函数 通知到组件外

HelloWorld组件代码如下：（代码里面有相应的注释）

父组件代码如下：

方案一 的缺点就是 父组件必须有个 visibleChange 这样的方法，有点累赘。

这时候 想到了 v-model 

因为

是下面这段代码的语法糖

也就是说 v-mode 自带了 一个改变父组件的方法 类似方案一的   paretnVisibleChange

但是使用 v-model 的时候 需要注意两点：

1. 子组件要接受  value  属性

2. value改变时 要触发input 事件

方案二：

HelloWorld 子组件的代码如下;

父组件代码如下：（父组件省去了 paretnVisibleChange 方法）

方案三：

vue 2.3.0之后新增了 .sync 属性 使用方法跟 v-model  类似 具体 请参考 ： https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符

下面我写了一个简单的sync 的使用实例：

父组件的代码如下：

子组件的代码如下：

props: {
    leftDragItemIsDraged: {
      type: Boolean,
      default: false
    }
  },
watch:{
    leftDragItemIsDraged(val) {
    this.thisLeftDragItemIsDraged = val;
},
thisLeftDragItemIsDraged(val){
    this.$emit('update:leftDragItemIsDraged', val)
}
}

效果如下：