升级Vue2.0后prop不能双向绑定的解决办法

前言

从Vue1.0升级到Vue2.0后，有很多改动，今天来讨论下prop没有了sync之后的解决方法。

从官方角度来讲，为了规范数据流动，砍掉了.sync，目的很明显，阻止子组件影响父组件的数据。

---

然而有很多时候还是需要双向绑定的，比如表单组件。所以可以用用于表单组件的v-model来实现双向绑定，对应的prop也就是value

---

注意：这里依然不能直接修改prop属性的值，依然会违反规定，这里使用内置的$emit将值传给父组件，由父组件修改后重新传给子组件，以达到双向绑定的效果，如果强行修改prop属性的值vue会报错

步骤

1. 定义一个变量（假设为：currentValue，默认值为false）用于修改。

2. 在prop中定义value。

3. 设定watcher监视value的变化，将value的值给currentValue。

4. 监视currentValue变化，在回调中写this.$emit('input', val)。

由此，就可以在父元素用v-model进行双向绑定啦~

---

下面贴上示例代码：

   export default{
      props: {
          value: {
              type: Boolean,
              default: false
          }
      },
    data () {
      return {
          currentValue: false
      }
    },
    methods: {
    },
    components: {
        'mt-popup': Popup
    },
    mounted: function () {
    },
    computed: {
    },
    watch: {
        value: function (val) {
            this.currentValue = val
        },
        currentValue: function (val) {
            this.$emit('input', val)
        }
    }
  }