[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.mzph.cn/news/46670.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

系统架构设计专业技能 · 系统工程与系统性能

系列文章目录 系统架构设计专业技能 网络技术&#xff08;三&#xff09; 系统架构设计专业技能 系统安全分析与设计&#xff08;四&#xff09;【系统架构设计师】 系统架构设计高级技能 软件架构设计&#xff08;一&#xff09;【系统架构设计师】 系统架构设计高级技能 …

手写Promise-then方法的设计

then方法的设计 实现then方法回调执行顺序 实现then方法 then(onFulFilled,onRejected){this.onFulFilled onFulFilled;this.onRejected onRejected;}回调执行顺序 再执行resolve的时候执行then方法回调&#xff0c;会存在一个问题&#xff0c;无法拿到回调方法的&#xff0…

2023年上半年软件设计师下午真题及答案解析

试题一(15分) 随着农业领域科学种植的发展&#xff0c;需要对农业基地及农事进行信息化管理&#xff0c;为租户和农户等人员提供种植相关服务&#xff0c;现欲开发农事管理服务平台&#xff0c;其主要功能是&#xff1a; (1)人员管理&#xff1a;平台管理员管理租户&#xff…

​Redis概述

目录 Redis - 概述 使用场景 如何安装 Window 下安装 Linux 下安装 docker直接进行安装 下载Redis镜像 Redis启动检查常用命令 Redis - 概述 redis是一款高性能的开源NOSQL系列的非关系型数据库,Redis是用C语言开发的一个开源的高键值对(key value)数据库,官方提供测试…

python Requests

Requests概述 官方文档&#xff1a;http://cn.python-requests.org/zh_CN/latest/,Requests是python的HTTP的库&#xff0c;我们可以安全的使用 Requests安装 pip install Requests -i https://pypi.tuna.tsinghua.edu.cn/simple Requests的使用 Respose的属性 属性说明url响…

zookeeper详细介绍

ZooKeeper是一个开源的分布式协调服务,具有以下一些关键特点: 数据模型 ZooKeeper的数据模型采用层次化的多叉树形结构,每个节点称为znode,类似于文件系统中的文件和目录。每个znode可以存储数据和控制信息。一致性保证 ZooKeeper通过ZAB协议,实现分布式环境下数据的强一致性,…

http学习笔记3

第 11 章 Web 的攻击技术 11.1 针对 Web 的攻击技术 简单的 HTTP 协议本身并不存在安全性问题&#xff0c;因此协议本身几乎不会成为攻击的对象。应用 HTTP 协议的服务器和客户端&#xff0c;以及运行在服务器上的 Web 应用等资源才是攻击目标。目前&#xff0c;来自互联网的攻…

【汇编语言】CS、IP寄存器

文章目录 修改CS、IP的指令转移指令jmp问题分析 修改CS、IP的指令 理论&#xff1a;CPU执行何处的指令&#xff0c;取决于CS:IP应用&#xff1a;程序员可以通过改变CS、IP中的内容&#xff0c;进行控制CPU即将要执行的目标指令&#xff1b;问题&#xff1a;如何改变CS、IP中的…

Neo4j之union基础

UNION 用于将多个 MATCH 或 RETURN 子句的结果合并为一个结果集。它可以用来合并不同模式的节点和关系&#xff0c;或者将多个查询的结果合并在一起。以下是一些常用的示例和解释&#xff1a; 基本用法&#xff1a; MATCH (p:Person) WHERE p.age > 30 RETURN p.name AS n…

CentOS Docker仓库和代理配置

无法直接访问外部网络时&#xff0c;除了Host自己的全局代理设置之外&#xff0c;需要单独给Docker Client和Instance设置代理。 如执行docker run时遇到下面的错误 docker: Error response from daemon: Get "https://registry-1.docker.io/v2/": dial tcp 3.216.…

Golang 基础语法问答

使用值为 nil 的 slice、map 会发生什么&#xff1f; 允许对值为 nil 的 slice 添加元素&#xff0c;但是对值为 nil 的 map 添加元素时会造成运行时 panic。 // map错误示例 func main() {var m map[string]intm["one"] 1 // error: panic: assignment to entry …

Python Opencv实践 - 图像均值滤波

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_COLOR) print(img.shape) pixel_count img.shape[0] * img.shape[1] print(pixel_count)#为图像添加椒盐噪声 #参考资料&#xf…

基于YOLOX的输电线路异物检测算法研究及软件设计_有系统有文献,整体认知蛮好的

我国自改革开放以来&#xff0c;大力发展工业和经济&#xff0c;对电能同样有着巨大的需求&#xff0c;所需求的电能不仅需要保证其数量&#xff0c;还要保障其质量&#xff0c;因此对整个电力系统安全稳定的运行也提出了更高的要求&#xff0c;电力系统发生故障要实时检测并及…

Kafka—工作流程、如何保证消息可靠性

什么是kafka&#xff1f; 分布式事件流平台。希望不仅仅是存储数据&#xff0c;还能够数据存储、数据分析、数据集成等功能。消息队列&#xff08;把数据从一方发给另一方&#xff09;&#xff0c;消息生产好了但是消费方不一定准备好了&#xff08;读写不一致&#xff09;&am…

Vscode详细安装教程

Vscode官网下载 官网地址&#xff1a;Download Visual Studio Code - Mac, Linux, Windows 通过链接可以直接跳转到下面的页面当中&#xff0c;支持的版本有Windows、Linux、Mac&#xff0c;可以选择适配自己电脑的版本&#xff0c;一般来说应该是Windows x64的。不要直接点W…

MySQL高级篇——MySQL架构篇1(Linux下MySQL8的安装与使用)

目录 0 安装前0.1 Linux系统及工具的准备0.2 查看是否安装过MySQL0.3 MySQL的卸载 1 MySQL8的Linux版安装1.1 MySQL的4大版本1.2 下载MySQL指定版本1.3 CentOS7下检查MySQL依赖1.4 CentOS7下MySQL安装过程 2 MySQL登录2.1 首次登录2.2 修改密码2.3 设置远程登录 3 MySQL 8 的密…

Python爬虫——scrapy_多网页下载

在DangSpider类中设置一个基础url base_url http://category.dangdang.com/pg page 1在parse方法中 # 每一页的爬取逻辑都是一样的&#xff0c;所以只需要执行每一页的请求再次调用parse方法就可以了if self.page < 100:self.page 1url self.base_url str(self.page)…

Spring Data Elasticsearch 的简单使用

目录 一、简介 二、配置 三、映射 四、 常用方法 五、操作&#xff08;重点&#xff09; 1、对索引表的操作 2、对文档的操作&#xff08;重点&#xff09; &#xff08;1&#xff09;、添加文档 &#xff08;2&#xff09;、删除文档 &#xff08;3&#xff09;、查询…

如何创建自定义的PyQt控件

首先&#xff0c;我们要明确一点&#xff0c;PyQt 是一个非常强大的图形用户界面&#xff08;GUI&#xff09;库&#xff0c;用于 Python。你可以使用它创建复杂的跨平台应用程序。在 PyQt 中&#xff0c;你可以创建自定义的控件&#xff0c;也就是我们常说的“Widget”。 对于…

【C语言】写一个程序,输入数量不确定的【0,9】范围内的整数,统计每一种数字出现的次数,输入-1表示结束

题目 写一个程序&#xff0c;输入数量不确定的【0,9】范围内的整数&#xff0c;统计每一种数字出现的次数&#xff0c;输入-1表示结束 代码 #include<stdio.h> int main() {int x;int i;int a[10];for(i0; i<10; i){//初始化数组 a[i] 0;}scanf("%d",&am…