【Vue.js】子组件的state接受父组件的props无法实时更新?那是因为你没有用深度监听。

在写页面逻辑的时候出现这样一个情况
子组件获取父组件的props值,并直接修改
控制台报错
这是因为vue为了避免子组件修改数据污染父组件而采取的措施

于是我把props值赋值给子组件的一个state

 props: {
    checkednames: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      mycheckedNames: this.checkednames
    };
  },

发现state值自从获取了第一次的props值之后再也没有改变过

《【Vue.js】子组件的state接受父组件的props无法实时更新?那是因为你没有用深度监听。》
即子组件收到了父组件传过来的props值,但并没有更新到state

原因在于:没有使用深度监听监听对象

解决方案:
如果要修改props传入的值,用watch可以多次修改,watch监听对象得用深度监听

  watch:{
    checkednames(val){
      this.mycheckedNames = val
    }
  }

我们发现state可以根据父组件传过来的props值实时更新了

《【Vue.js】子组件的state接受父组件的props无法实时更新?那是因为你没有用深度监听。》

    原文作者:无锡肖奈
    原文地址: https://segmentfault.com/a/1190000019704125
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞