Vuejs子组件的state接受父组件的props无法实时更新那是因为你没有用深度监听

37次阅读

共计 402 个字符,预计需要花费 2 分钟才能阅读完成。

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

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

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

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


即子组件收到了父组件传过来的 props 值,但并没有更新到 state

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

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

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

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

正文完
 0