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

子组件:

<template>
 <el-dialog
    v-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.mfbz.cn/a/581241.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何选择适合自己需求的DC电源模块?

BOSHIDA 如何选择适合自己需求的DC电源模块&#xff1f; 在选择适合自己需求的DC电源模块时&#xff0c;需要考虑一些关键因素&#xff0c;以确保选择的模块能够满足电源要求并具有良好的性能。下面是一些值得考虑的因素&#xff1a; 1. 电压输出范围&#xff1a;首先&#xf…

短视频素材从哪里获取?推荐8个短视频素材高清网站

在这个视觉内容至关重要的数字化时代&#xff0c;高质量的视频素材是任何成功视频项目的核心。无论是加强品牌宣传、提升社交媒体互动还是制作引人注目的广告&#xff0c;这些精选的全球视频素材网站都将为你的创意注入活力&#xff0c;帮助你在激烈的市场竞争中脱颖而出。 1.…

2024LarkXR新增功能系列之六 | ⽀持8K分辨率

Paraverse平行云企业级实时云渲染解决方案LarkXR是平行云自主研发的CloudXR解决方案&#xff0c;在业界实现了创新突破。通过分钟级部署大规模云端资源、高度适配XR所有主流引擎、以及灵活支持不同交互和沉浸方式的内容形式&#xff0c;LarkXR解决了Cloud XR商业化过程中所面临…

Linux之进程间通信(二)

system V system V共享内存是内核中专门设计的通信的方式, 粗粒度划分操作系统分为进程管理, 内存管理, 文件系统, 驱动管理.., 粒度更细地分还有 进程间通信模块. 对于操作系统, 通信的场景有很多, 有以传送数据, 快速传送数据, 传送特定数据块, 进程间协同与控制以目的, 它…

SystemUI GlobalActions plugin解析

com.android.systemui.action.PLUGIN_GLOBAL_ACTIONS 系统的默认实现为GlobalActionsImpl: 是谁发送了showShutdownUi指令&#xff1f; GlobalActionsImpl 是通过inject的方式创建的 GlobalActionsComponent是一个system UI services&#xff0c;配置在config.xml中&#xff…

Docker容器:网络模式与资源控制

目录 一、Docker 网络模式 1、Docker 网络实现原理 2、Docker 网络模式概述 2.1 Host 模式 2.2 Container 模式 2.3 None 模式 2.4 Bridge 模式 2.5 自定义网络&#xff08;user-defined network&#xff09; 3、配置 docker 网络模式 3.1 查看网络基础命令 3.1.1 查…

“怡宝”冲刺港股,饮用水基本盘稳如磐石

最近&#xff0c;饮用水市场异常热闹。 先是“怡宝”所属的华润饮料正式向港交所提交上市申请。随即&#xff0c;多名农夫山泉员工在朋友圈发文“推出绿瓶纯净水”&#xff0c;撞脸怡宝经典包装。“怡宝”遭遇奇袭的背后&#xff0c;是双方持续“交锋”的多年&#xff0c;随着…

Vue从入门到精通-01-Vue的介绍和vue-cli

MVVM模式 Model&#xff1a;负责数据存储 View&#xff1a;负责页面展示 View Model&#xff1a;负责业务逻辑处理&#xff08;比如Ajax请求等&#xff09;&#xff0c;对数据进行加工后交给视图展示 关于框架 为什么要学习流行框架 1、企业为了提高开发效率&#xff1a;…

【Harmony3.1/4.0】笔记三-计算器

概念 网格布局是由“行”和“列”分割的单元格所组成&#xff0c;通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力&#xff0c;子组件占比控制能力&#xff0c;是一种重要自适应布局&#xff0c;其使用场景有九宫格图片展示、日历、计算器等…

python-pytorch 如何使用python库Netron查看模型结构(以pytorch官网模型为例)0.9.2

Netron查看模型结构 参照模型安装Netron写netron代码运行查看结果需要关注的地方 2024年4月27日14:32:30----0.9.2 参照模型 以pytorch官网的tutorial为观察对象&#xff0c;链接是https://pytorch.org/tutorials/intermediate/char_rnn_classification_tutorial.html 模型代…

基于Springboot的新生宿舍管理系统

基于SpringbootVue的新生宿舍管理系统的设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringbootMybatis工具&#xff1a;IDEA、Maven、Navicat 系统展示 用户登录 首页 公告信息管理 院系管理 班级管理 学生管理 宿舍信息管理 宿舍安排管理…

清华军团推出中国首个对标Sora的视频大模型Vidu,扒一扒它背后的模型架构

就在前天&#xff0c;Vidu 在 2024 中关村论坛年会之中横空出世。 伴随着“中国首个”&#xff0c;“Sora 级视频模型”&#xff0c;“模拟真实的物理世界”等关键词下的刷屏式的报道&#xff0c;Vidu 一下成为国产视频模型的一剂强心针。 尽管目前 Vidu 支持的视频长度是 16 …

二叉树理论和题目

二叉树的种类 在我们解题过程中二叉树有两种主要的形&#xff1a;满二叉树和完全二叉树。 满二叉树 满二叉树&#xff1a;如果一棵二叉树只有度为0的结点和度为 2 的结点&#xff0c;并且度为 0 的结点在同一层上&#xff0c;则这棵二叉树为满二叉树。 这棵二叉树为满二叉树…

vscode的终端区乱码怎么办呢?

vscode的终端区乱码怎么办呢? 错误效果解决办法一解决办法二(极力推荐方法二)最终效果参考文献 错误效果 解决办法一 解释:你之所以使用了utf8还乱码,是因为你的电脑目前根本无法兼容utf8,只兼容gbk 怎么让你的电脑兼容utf8,我写在方法二 在设置中,输入encoding 解决办法二(极…

水稻病害检测(YOLO数据集,多分类,稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫)

是自己利用LabelImg工具进行手工标注&#xff0c;数据集制作不易&#xff0c;请尊重版权&#xff08;稻瘟病、纹枯病、褐斑病、枯心病、霜霉病、水稻细菌性条纹斑病、稻苞虫&#xff09; 如果需要yolv8检测模型和数据集放在一起的压缩包&#xff0c;可以关注&#xff1a;最新最…

求解约瑟夫问题

思路&#xff1a; 我们要创建两个指针 有一个指针pcur指向头结点&#xff0c;该pcur作为报数的指针&#xff0c;还有一个指针ptail指向尾结点&#xff0c;作为记录pcur的地址 每报数为m时&#xff0c;pcur指向下一个元素的地址&#xff0c;ptail销毁报数为m的地址&#xff0…

分光光度法基本原理与应用

本文介绍分光光度法基本原理与应用。 分光光度法是分光光度计采用的方法&#xff0c;在医疗检测仪器&#xff0c;实验室测量仪器中经常使用。本文简要分析其原理&#xff0c;并给出实际工作过程中如何应用及应用过程中可能的误差来源。 1.基本概念 设一平行单色光垂直照射某…

网络安全工程师必备的6个渗透测试工具

渗透测试是模拟黑客攻击&#xff0c;评估系统安全性的重要方法。 网络安全工程师需要掌握各种渗透测试工具&#xff0c;才能有效地发现和修复漏洞。 1. Nmap 功能: 强大的网络扫描器&#xff0c;可以扫描网络拓扑、识别主机和服务、发现开放端口和漏洞。 用途: 信息收集、漏洞…

一加Ace3/12/Ace2pro手机ColorOS14刷KernelSU内核ROOT-解决无限重启变砖

一加Ace3/一加12/一加11等手机升级了安卓14底层&#xff0c;并且ColorOS版本也更新到了14版本界面和功能都比之前的系统表现更加优秀&#xff0c;但刷机方面&#xff0c;相对之前存在一些差异&#xff0c;特别是KernelSU内核级别root权限&#xff0c;不再支持一键刷入KernelSU通…

MySQL的事务,函数和索引

事务 数据库的事务是一种机制&#xff0c;一种操作序列&#xff0c;包含了一组数据库的操作命令 简单了解&#xff1a;如果一个包含多个步骤的业务操作&#xff0c;被业务管理&#xff0c;要么这些操作同时操作成功&#xff0c;要么同时操作失败 事务是一个不可分割的工作逻…
最新文章