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

文章目录

需求及效果

uView(1.x版本)中, 有Pop弹出层的组件, 现在有个需求是,进行简单封装,有些通用的设置不想每次都写(比如 :mask-custom-style="{background: 'rgba(0, 0, 0, 0.7)'}"这种)

然后内部内容交给插槽去自己随意发挥.

遇到的问题

子组件封装内部

html 复制代码
<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>

子组件调用

html 复制代码
		<!-- 清除搜索记录弹框 -->
		<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语法糖

所以,进行双向绑定的办法如下:

子组件

html 复制代码
<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来同步状态的变化


父组件

html 复制代码
		<centerPopup :centerPopShow.sync="cleanpopshow">
		</centerPopup>

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

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

相关推荐
BumBle1 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app
2501_915921431 小时前
运营日志驱动,在 iOS 26 上掌握 App 日志管理实践
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q19632884757 小时前
python+uniapp基于微信美食点餐系统小程序
spring boot·python·微信·django·flask·uni-app·node.js
阿金要当大魔王~~8 小时前
uniapp 请求携带数据 \\接口传值 \\ map遍历数据
前端·javascript·uni-app
2501_9151063210 小时前
HTTPS 爬虫实战指南 从握手原理到反爬应对与流量抓包分析
爬虫·网络协议·ios·小程序·https·uni-app·iphone
2501_9160074710 小时前
iOS 上架技术支持全流程解析,从签名配置到使用 开心上架 的实战经验分享
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916007471 天前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
砺能1 天前
uniapp生成的app添加操作日志
前端·uni-app
2501_915921431 天前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app