升级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)
        }
    }
  }
    原文作者:mr小潇潇
    原文地址: https://segmentfault.com/a/1190000007881033
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞