当前位置: 首页 > news >正文

[uni-app] uview封装Popup组件,处理props及v-model的传值问题

文章目录

  • 需求及效果
  • 遇到的问题
  • 解决的办法
  • 偷懒的写法

需求及效果

uView(1.x版本)中, 有Pop弹出层的组件, 现在有个需求是,进行简单封装,有些通用的设置不想每次都写(比如 :mask-custom-style="{background: 'rgba(0, 0, 0, 0.7)'}"这种)
在这里插入图片描述
然后内部内容交给插槽去自己随意发挥.

遇到的问题

子组件封装内部

<template><!-- 通用搜索框-其内容自定义 --><u-popup v-model="isShow" mode="center" border-radius="20" :width="width":mask-custom-style="{background: 'rgba(0, 0, 0, 0.7)'}" @close="close"><slot name="content"></slot></u-popup>
</template><script>

子组件调用

		<!-- 清除搜索记录弹框 --><centerPopup :isShow="show"></centerPopup>

然后说我们就可以通过 show这个状态去控制, 但此时我们会遇到一个报错
Avoid mutating a prop directly since the value will be overwritten whenever the parent component
简单来说
就是涉及到了 props单向传递, 与v-model产生了冲突
在这里插入图片描述
这里就相当于, 子组件也去更改了isShow这个props,这显然是不允许的

解决的办法

网上搜索就能看到很多关于 props + v-model双向绑定帖子
比如: props+v-model——父子双向通信
基本就可以处理解决了

偷懒的写法

再进一步, 上面的写法也有点麻烦
再看这个地方, 是不是想到.sync语法糖
在这里插入图片描述
所以,进行双向绑定的办法如下:

子组件

<template><!-- 通用搜索框-其内容自定义 --><u-popup v-model="isShow" mode="center" border-radius="20" :width="width":mask-custom-style="{background: 'rgba(0, 0, 0, 0.7)'}" @close="close"><!-- 自定义内容插槽 --><slot name="content"></slot></u-popup>
</template><script>/*** 通用 center型  - popup弹框, 其内容slot定义,* 仅提供通用的样式* */export default {name: 'centerPopup',data() {return {isShow: false,}},props: {centerPopShow: {type: Boolean,default: false},width: {type: [String, Number],default: '590'}},watch: {centerPopShow: {handler: function(nv, ov) {this.isShow = nv;}}},methods: {close() {this.$emit("update:centerPopShow", false)}}}
</script><style>
</style>

用watch观察props:centerPopShow, 来驱动 v-mode:isShow进行状态变更
.sync语法糖的写法, 来通知父组件的props:centerPopShow来同步状态的变化


父组件

		<centerPopup :centerPopShow.sync="cleanpopshow"></centerPopup>

=>pop弹窗弹出, 只要设置 this.cleanpopshow=true即可
=>pop弹窗隐藏, 只要设置 this.cleanpopshow=false即可

http://www.lryc.cn/news/129805.html

相关文章:

  • 【C++】int a;和int *p=new int;有什么区别?
  • redis事务管理
  • TPS_C++版本及功能支持备注
  • 同步jenkinsfile流水线(sync-job)
  • STM32单片机WIFI-APP智能温室大棚系统CO2土壤湿度空气温湿度补光
  • SpringBoot复习:(52)不再需要使用@EnableTransactionManagement的原因
  • HackNos 3靶场
  • 【办公自动化】使用Python批量生成PPT版荣誉证书
  • 【C++深入浅出】初识C++中篇(引用、内联函数)
  • 前端:VUE2中的父子传值
  • 【100天精通python】Day40:GUI界面编程_PyQt 从入门到实战(完)_网络编程与打包发布
  • Redis——set类型详解
  • redis---》高级用法之慢查询/pipline与事务/发布订阅/bitmap位图/HyperLogLog/GEO地理位置信息/持久化
  • Find My资讯|苹果Vision Pro开发者需将设备配对 AirTag
  • Go 语言中排序的 3 种方法
  • 12----Emoji表情
  • C++四种强制类型转换
  • git仓库新建上传记录
  • flutter调用so
  • c#依赖注入
  • Django框架使用定时器-APScheduler实现定时任务:django实现简单的定时任务
  • Go学习笔记之数据类型
  • Spring Cloud 微服务
  • SpringBoot属性配置
  • 算法通关村第十关 | 归并排序
  • SpringBoot3集成Kafka
  • css学习1
  • rust踩雷笔记(1)——切片传参和解引用赋值
  • 安全 1自测
  • 寻路算法小游戏