Vue3 el-dialog 二次封装踩坑实录(v-model moduleValue 不触发)

devtools/2024/12/22 23:25:36/

如果你封装了一个el-dialog的子组件,想通过父组件v-model的形式调用,切记不能使用v-model,要使用 v-model:[你的参数],例如 v-model:visible

<template><el-dialogv-model="dialogVisibale":title="title"width="800px"><el-card class="mb-5 mt-2">测试效果</el-card><template #footer><div class="dialog-footer"><el-button type="primary" @click="handleConfirm">确定</el-button></div></template></el-dialog>
</template><script setup>
import { ref, computed } from "vue"
const emits = defineEmits(['update:visible', 'listUpdate'])const props = defineProps({title: {type: String,default: '标题'},visible: {type: Boolean,default: false},
})
const dialogVisibale = computed({get() {return props.visible},set(val) {emits('update:visible', val)}
})const handleConfirm = () => {dialogVisibale.value = falseemits('listUpdate')
}// 取消
const handleClose = (done) => {dialogVisibale.value = false
}</script><style scoped lang="less"></style>
// 父组件
<template><el-button @click="handleAdd">打开dialog</el-button><staffing-dialog v-model:visible="dialogVisibale" @listUpdate="onSearch"/>
</template><script setup>
import staffingDialog from "./staffingDialog.vue";const dialogVisibale = ref(false);const handleAdd = () => {dialogVisibale.value = true;
}const onSearch() => {// 弹窗保存需要处理的逻辑
}

http://www.ppmy.cn/devtools/25489.html

相关文章

Codigger数据篇(下):数据安全的全方位保障

在数字化浪潮中&#xff0c;数据已成为现代企业的核心财富。Codigger作为领先的数据服务平台&#xff0c;深知数据安全对于用户的重要性&#xff0c;因此在深挖数据价值的同时&#xff0c;我们始终坚守数据安全防线。 一、双重加密技术保障 Codigger平台运用先进的加密通信和…

yarn的安装与使用

Yarn的安装与使用主要涉及到以下几个步骤&#xff1a; 安装Yarn&#xff1a; 首先&#xff0c;确保您的系统中已安装Node.js和npm。Yarn可以在Windows、MacOS和Linux上运行。使用npm安装Yarn。运行命令npm install -g yarn来安装和升级Yarn。安装完成后&#xff0c;通过运行y…

【软测学习笔记】Linux入门Day01

&#x1f31f;博主主页&#xff1a;我是一只海绵派大星 &#x1f4da;专栏分类&#xff1a;软件测试笔记 &#x1f4da;参考教程&#xff1a;黑马教程❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 1、操作系统 2、Linux发展历程 3、命令行程序 4、cd 切换文件夹…

Qt QThreadPool线程池

1.简介 QThreadPool类管理一个QThread集合。 QThreadPool管理和重新设计单个QThread对象&#xff0c;以帮助降低使用线程的程序中的线程创建成本。每个Qt应用程序都有一个全局QThreadPool对象&#xff0c;可以通过调用globalInstance来访问该对象。 要使用其中一个QThreadPool…

Axios

文章目录 AxiosAxios特性安装使用方法Axios 实例拦截器取消请求响应结构错误处理在Vue中封装Axios Axios Axios 是一个基于 promise 的 HTTP 库&#xff0c;可以用在浏览器和 node.js 中。 文档&#xff1a;https://axios.nodejs.cn/ Axios特性 从浏览器中创建 XMLHttpReques…

汽车底盘域的学习笔记

前言&#xff1a;底盘域分为传统车型底盘域和新能源车型底盘域&#xff08;新能源系统又可以分为纯电和混动车型&#xff0c;有时间可以再研究一下&#xff09; 1&#xff1a;传统车型底盘域 细分的话可以分为四个子系统 传动系统 行驶系统 转向系统 制动系统 1.1传动系…

Furion项目的单元测试

.Net项目中如果要对Controller或者服务进行测试一般要用mock创建需要注入的实例, 要配置好这些实例还挺复杂的 在Furion帮我们实现了单元测试的构造函数注入, 让单元测试变得简单, 具体步骤如下 在解决方面里面新增一个xunit的测试项目TestProject1, 测试项目一般单独放在test…

Qt :浅谈在大型项目中使用信号管理器

一、引言 在大型的Qt项目中,我们往往涉及到很多不同类型的对象之间通信交互,这时候,仍旧采用小项目使用的哪里使用,哪里关联的方法,在复杂的场景下将是无穷无尽的折磨。 下面我们给出一种苦难的场景。 class A: public QObject {Q_OBJECT public:A(QObject *parent = nu…