问题

父组件通过props传递数据对象中的某个属性值给子组件,子组件中watch监听传来的props的变化执行某些内容。父组件中循环调用自己嵌套了多层。出现即使修改了传值,watch也没有监听到,而computed可以监听到的情况。我遇到的问题大概就是以上的情景,实际项目中更为复杂,难以描述得非常清楚。

解决

使用immediate选项。 原本这个选项是用于要立即以当前值触发监听处理回调的,但是遇到上面这种情况开启这个之后就神奇的解决了。

例如,监听的是传入的checked属性

// children.vue
<script>
export default {
  name: 'Children',
  props: {
    checked: Boolean
  },
  data () {
    return {
      resetChecked: this.checked
    }
  },
  watch: {
//  这种写法监听不到
//  checked(val){
//    this.resetChecked = val;
//  }

// 改成这样写
    checked: {
    	immediate: true,
    	handler(val) {
      		this.resetChecked = val;
      	}
    }
  }
}
</script>

一般情况下,不需要开启immediate也可以监听到的;要是情况不一般,试试开启吧。
要是遇到同样的情况,知道是什么原因导致watch监听不到prop及为什么开启immediate就可以的,麻烦留言告知一下,谢谢!

参考:vue 子组件watch监听不到prop的解决

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐