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

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

}

},

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容