Vue2中watch监听props属性无效不触发,而computed可以监听到
问题父组件通过props传递数据对象中的某个属性值给子组件,子组件中watch监听传来的props的变化执行某些内容。父组件中循环调用自己嵌套了多层。出现即使修改了传值,watch也没有监听到,而computed可以监听到的情况。我遇到的问题大概就是以上的情景,实际项目中更为复杂,难以描述得非常清楚。解决使用immediate选项。 原本这个选项是用于要立即以当前值触发监听处理回调的,但是遇到上面
·
问题
父组件通过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
就可以的,麻烦留言告知一下,谢谢!
更多推荐
已为社区贡献3条内容
所有评论(0)