脚本宝典收集整理的这篇文章主要介绍了升级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
    },
    @R_512_1282@ed: function () {
    },
    computed: {
    },
    watch: {
        value: function (val) {
            this.currentValue = val
        },
        currentValue: function (val) {
            this.$emit('input', val)
        }
    }
  }

脚本宝典总结

以上是脚本宝典为你收集整理的升级Vue2.0后prop不能双向绑定的解决办法全部内容，希望文章能够帮你解决升级Vue2.0后prop不能双向绑定的解决办法所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。