vue3中如何父组件中使用弹框,子组件中关闭弹框

子组件:

<template><el-dialogv-model="visible"title="Tips"width="500"><div class="left"></div><div class="right"></div><template #footer><div class="dialog-footer"><el-button type="primary" @click="save">保存</el-button><el-button @click="close">取消</el-button></div></template></el-dialog>
</template>
<script lang='ts' setup>
import { onMounted, ref,computed } from 'vue'
const props = defineProps({dialogVisible: {type: Boolean,default: false}
})
const emit = defineEmits(['update:dialogVisible'])
onMounted(() => {console.log('组件执行了');
})
// 备注:这里一定要通过中间变量(代理方式),否则v-model绑定的值会报错
let visible = computed({get() {return props.dialogVisible},set(value: boolean) {console.log('value222',value);emit('update:dialogVisible', value)}
})
const close = ()=>{// 请关闭弹框visible.value = false;}
const save = () => {visible.value = false;
}
</script>

父组件:

   <Son v-model:dialogVisible="dialogVisible"@closeDialog="closeDialog"></Son>

注意:这里一定要加v-model,千万不要漏掉了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/4572.shtml

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

相关文章

Learning to Upsample by Learning to Sample

摘要 论文&#xff1a;https://arxiv.org/pdf/2308.15085 我们提出了DySample&#xff0c;一个超轻量级且高效的动态上采样器。虽然最近的基于内核的动态上采样器&#xff0c;如CARAFE、FADE和SAPA&#xff0c;取得了令人印象深刻的性能提升&#xff0c;但它们引入了大量的计算…

前端实现文件下载的方法

一、简介 ​ 之前我分享过《前端实现图片下载的方法》&#xff0c;但那只是针对图片下载的方法。本博客分享的是对于文件的下载方法&#xff0c;包括图片文件和非图片文件的下载&#xff0c;例如png、doc、pdf、ppt等等。 ​ 当然&#xff0c;还是那个大前提&#xff1a;在任…

大模型对数字营销的驱动赋能

一、大模型驱动的营销数智化个信未来发展趋势 1.模型算法能力全面升级 大模型凭借智能化的用户洞察&#xff0c;个性化的需求预测、系统化的数据分析、效率化的营销决策以及实实化的全域检测支持&#xff0c;为营销行业更加准确地把握市场动态和消费者需求提供了强大支持。可以…

Spring Boot 如何实现缓存预热

Spring Boot 实现缓存预热 1、使用启动监听事件实现缓存预热。2、使用 PostConstruct 注解实现缓存预热。3、使用 CommandLineRunner 或 ApplicationRunner 实现缓存预热。4、通过实现 InitializingBean 接口&#xff0c;并重写 afterPropertiesSet 方法实现缓存预热。 1、使用…

数据结构和算法:贪心

贪心算法 贪心算法是一种常见的解决优化问题的算法&#xff0c;其基本思想是在问题的每个决策阶段&#xff0c;都选择当前看起来最优的选择&#xff0c;即贪心地做出局部最优的决策&#xff0c;以期获得全局最优解。 贪心算法和动态规划都常用于解决优化问题。它们之间存在一…

TCP/IP协议族中的TCP(二):解析其关键特性与机制

⭐小白苦学IT的博客主页⭐ ⭐初学者必看&#xff1a;Linux操作系统入门⭐ ⭐代码仓库&#xff1a;Linux代码仓库⭐ ❤关注我一起讨论和学习Linux系统 滑动窗口 在前面我们讨论了确认应答策略, 对每一个发送的数据段, 都要给一个ACK确认应答. 收到ACK后再发送下一个数据段.这样…

力扣HOT100 - 98. 验证二叉搜索树

解题思路&#xff1a; class Solution {public boolean isValidBST(TreeNode root) {return recur(root,Long.MIN_VALUE,Long.MAX_VALUE);}public boolean recur(TreeNode root,long lower,long upper){if(rootnull) return true;if(root.val<lower||root.val>upper) re…

HTTP Host 头攻击 原理以及修复方法

漏洞名称 &#xff1a;HTTP Host头攻击 漏洞描述&#xff1a; 一般通用web程序是如果想知道网站域名不是一件简单的事情&#xff0c;如果用一个固定的URI来作为域名会有各种麻烦。开发人员一般是依赖HTTP Host header&#xff08;比如在php里_SERVER["HTTP_HOST"] …

Ubuntu上的screenfetch

2024年4月28日&#xff0c;周日下午 这些文本是由一个叫做 “screenfetch” 的命令生成的&#xff0c;它会显示一些系统和用户信息&#xff0c;包括操作系统、内核版本、系统运行时间、安装的软件包数量、使用的Shell、分辨率、桌面环境、窗口管理器、主题、图标主题、字体、CP…

K8s: 应用项目部署运维环境搭建

使用 StatefulSet 部署 Mysql 数据库环境准备是应用的前置准备工作 先在 node 节点上安装 mysql $ sudo yum install mysql-server -y 安装$ sudo systemctl start mysqld 启动$ sudo systemctl enable mysqld 设置开启启动$ sudo mysql_secure_installation 设置安全选项$ my…

Matlab进阶绘图第51期—带填充等高线的三维特征渲染散点图

带填充等高线的三维特征渲染散点图是填充等高线图与特征渲染三维散点图的组合。 其中&#xff0c;填充等高线图与特征渲染的三维散点图的颜色用于表示同一个特征。 由于填充等高线图无遮挡但不直观&#xff0c;特征渲染的三维散点图直观但有遮挡&#xff0c;而将二者组合&…

MySQL数据库进阶篇二(优化、视图/存储过程/存储函数/触发器)

目录 一、SQL优化1.1、插入数据1.2、主键优化1.3、order by优化1.4、group by优化1.5、limit优化1.6、count优化1.7、update优化 二、视图/存储过程/存储函数/触发器2.1、视图2.2、存储过程2.3、存储函数2.4、触发器 一、SQL优化 分为&#xff1a;插入数据优化&#xff0c;主键…

一文了解——企业网站为什么需要安装SSL证书 !

企业网站安装SSL证书主要是出于以下几个关键原因&#xff1a; 1. 数据加密&#xff1a;SSL证书能确保网站与用户浏览器之间的数据传输是加密的&#xff0c;保护敏感信息&#xff08;如登录凭据、个人信息、交易数据&#xff09;不被第三方截取或篡改&#xff0c;维护用户隐私安…

Apache Flink:流式数据处理的新典范

在大数据处理领域&#xff0c;Apache Flink以其强大的流式数据处理能力&#xff0c;逐渐成为了业界的新宠。Flink是一个分布式流处理框架&#xff0c;能够处理无界和有界数据流&#xff0c;提供了高吞吐、低延迟的数据处理能力。 Flink的核心优势在于其流处理和批处理的统一模…

968.监控二叉树 树上最小支配集

法一: 动态规划 一个被支配的节点只会有三种状态 1.它本身有摄像头 2.他没有摄像头, 但是它的父节点有摄像头 3.他没有摄像头, 但是它的子节点有摄像头 我们 dfs(node,state) 记录在node节点时(以node为根的子树),状态为state下的所有最小摄像头 // 本身有摄像头就看左右孩子…

Elementplus远程搜索下拉

远程搜索 :remote-method“getAppNumberList” <div class"filter-item"><span>型号:</span><el-select v-model"listQuery.numberId" clearable filterable :remote-method"getAppNumberList" remote placeholder"请…

蓦然回首,追忆那些备战OCM的日子

蓦然回首 前段时间偶然在墨天轮群看到一位在墨天轮轮社区非常活跃的老兄发的《那些年&#xff0c;我们一起追过的OCP》的文章&#xff0c;获悉墨天轮在举办【我的备考经验】的有奖征文活动&#xff0c;打开那篇文章&#xff0c;一下子又把我的思绪拉回到了好几年前&#xff0c;…

数据结构之顺顺顺——顺序表

1.浅谈数据结构 相信我们对数据结构都不陌生&#xff0c;我们之前学过的数组就是最基础的数据结构&#xff0c;它大概就长这样&#xff1a; 数组 而作为最简单的数据结构&#xff0c;数组只能帮助我们实现储存数据这一个功能&#xff0c;随着学习的深入&#xff0c;和问题的日渐…

React | React.cloneElement 的使用

我看到同事的代码里有 cloneElement&#xff0c;于是去了解了一下这个函数。 就跟它的名字一样&#xff0c;克隆元素&#xff0c;可以基于一个元素创建一个新的元素&#xff0c;并且为新元素添加新的属性或者覆盖已有的属性。 下面是一个简单例子&#xff1a; .node1 {backg…

Java集合框架-Collection-queue

目录 一、Deque二、ArrayDequeArrayDeque层次结构图ArrayDeque概述ArrayDeque底层数据结构ArrayDeque常用方法(简略) 三、PriorityQueuePriorityQueue层次结构图PriorityQueue概述PriorityQueue 底层数据结构PriorityQueue常用方法(详细) Java里有一个叫做Stack的类&#xff0c…