van-popup在组件中使用v-model绑定父组件传来的值报

2022-05-25  本文已影响0人  昵称被占用厉害了

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

}

},

最后,如果谁还有更好的方法,欢迎留言!

上一篇 下一篇

猜你喜欢

热点阅读