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

ops/2024/12/22 14:01:33/

子组件:

javascript"><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>

父组件:

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

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


http://www.ppmy.cn/ops/22042.html

相关文章

12.Hexo helpers类似函数和data folder数据文件夹

helper Hexo里的helper&#xff0c;或者说是函数 基本上就是小函数&#xff0c;可以在layout布局中使用&#xff0c;可以允许做一些事情 如字符串操作、检查true或false、检查是否在一个页面上、打印出某个页面中的日期或时间特定格式 打开index.ejs trim 可以通过 <%…

远程桌面连接不上个别服务器的问题分析与解决方案

在日常的IT运维工作中&#xff0c;远程桌面连接&#xff08;RDP&#xff0c;Remote Desktop Protocol&#xff09;是我们经常使用的工具之一&#xff0c;用于管理和维护远程服务器。然而&#xff0c;有时我们可能会遇到无法连接到个别服务器的情况。针对这一问题&#xff0c;我…

5g工业数采网关是什么?-天拓四方

随着工业4.0时代的到来&#xff0c;数字化、网络化、智能化成为工业发展的新趋势。在这个过程中&#xff0c;5G工业数采网关作为一种关键设备&#xff0c;发挥着越来越重要的作用。本文将详细解析5G工业数采网关是什么&#xff0c;以及它在工业领域中的应用和重要性。 一、5G工…

(学习日记)2024.05.05:UCOSIII第五十九节:User文件夹函数概览(uCOS-III->Source文件夹)第五部分

之前的章节都是针对某个或某些知识点进行的专项讲解,重点在功能和代码解释。 回到最初开始学μC/OS-III系统时,当时就定下了一个目标,不仅要读懂,还要读透,改造成更适合中国宝宝体质的使用方式。在学完野火的教程后,经过几经思考,最后决定自己锦上添花,再续上几章。 这…

iOS - 多线程-atomic

文章目录 iOS - 多线程-atomic1. 源码分析1.1 get方法1.2 set方法 2. 一般不使用atomic的原因 iOS - 多线程-atomic atomic用于保证属性setter、getter的原子性操作&#xff0c;相当于在getter和setter内部加了线程同步的锁可以参考源码objc4的objc-accessors.mm它并不能保证使…

武汉星起航以专业服务助力创业者,满足客户的多样化需求

跨境电商行业近年来呈现出迅猛发展的态势&#xff0c;市场规模不断扩大&#xff0c;前景广阔。然而&#xff0c;随着行业的快速发展&#xff0c;竞争也日益激烈&#xff0c;各种挑战层出不穷。在这一背景下&#xff0c;武汉星起航电子商务有限公司以其专业的服务和创新的业务模…

Flink Job提交分析

1.概述 Flink 应用程序的提交方式为&#xff1a;打成jar包&#xff0c;通过 flink 命令来进行提交。 flink 命令脚本的底层是通过 java 命令启动&#xff1a;CliFrontend 类 来启动 JVM 进程&#xff0c;执行任务的构造和提交。 flink run xxx.jar class arg1 arg2flink.sh 脚…

vscode在json文件中添加注释

1.在设置中输入关联文件&#xff0c;点击添加项&#xff1b; 2.