van-popup在子组件中绑定父组件传来的值时报错如下
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "show"”
<van-popup v-model="show" round position="bottom" @close="close">
子组件中绑定了show,报错的大概意思是,避免直接改变属性,因为每当父组件重新渲染时,该值将被覆盖。相反,使用基于属性值的数据或计算属性。通过props传递给子组件的topActive,不能在子组件内部修改props中的show值。
百度了很多方法,但是不能达到预期效果
1、使用计算属性
这个方法确实不会报错,但是会出现一个问题,点击van-popup遮罩层的时候,只有遮罩消失了,里面的内容还在,并且已经死掉了(注:我里面的内容使用的级联van-cascader)。
2、直接赋值给data()中的属性
showhide:this.show
然后v-model绑定showhide,但是这样也有问题,就是不能响应式了,可能是我改的有问题,但是确实没有实现
最后我从计算属性找到了灵感,我想计算属性不行的原因可能是因为它有缓存,所以我就想到了watch监听属性,果然完美解决
watch:{
show(newVal, oldVal){
this.showhide=newVal
}
},
最后,如果谁还有更好的方法,欢迎留言!