Vue3.4新增的defineModel的使用

define-model的作用

在3.3及之前的版本,父子组件之间的通讯,一直都是靠props(父传子)和emit(子传父)来实现。而define-model整合了这两种方法,只需要在父组件中定义define-model的方法,子组件中进行声明,参数可以是一个变量,也可以是一个函数(响应式的)。一旦该变量发生改变,父子组件拿到的都是最新值,这就是define-model的作用。

使用情况

上文也讲过,对于props和emit联合起来的情况都可以使用,但是正常情况下对于普通变量,还是用props与emit更加熟练。且define-model对于嵌套的比较深的变量,踩坑的方式有很多种。

但是对于函数类型的变量,使用define-model会比较方便。

使用实例

需求:
在这里插入图片描述
由于数据结构的问题,单独把表单给封装了。(当事人表示非常后悔)这就是本实例的环境。遇到的问题是,父组件的modal点击确定的时候,需要调用子组件的校验表单方法。并且如果有问题需要抓取,没问题才能点击确定之后在父组件中发起修改(添加)数据的请求。这里的组件库是ant。

这里抛出一种情况。比如父组件需要在某时刻调用子组件的一些方法。我们可以先在父组件中定义一个响应式变量,用来定义一个函数。

  const rulesVerify = ref();

然后再通过define-model的方式传给子组件:

    <set-proportionref="child"v-model:rulesVerify="rulesVerify"></set-proportion>

子组件内部需要声明这个变量,接受类型是函数类型。

  const rulesVerify = defineModel('rulesVerify', {type: Function as PropType<() => Promise<void>>,});const verifyForm = async () => {const res = await formRef.value.validateFields();return res;};rulesVerify.value = verifyForm;

父组件调用:

 // 添加const handleUpdate = async () => {await rulesVerify.value().then((data) => {console.log(data);});await DimocraticApi.saveOrUpdatePlanInfo(updateForm.value);addModal.value = false;refreshTableData.value?.();};

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

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

相关文章

GIT回滚

1. 使用 git revert git revert 命令会创建一个新的提交&#xff0c;这个提交会撤销指定提交的更改。这通常用于公共分支&#xff08;如 main 或 master&#xff09;&#xff0c;因为它不会重写历史。 git revert HEAD # 撤销最近的提交 # 或者指定一个特定的提交哈希值 …

Net开源项目推荐-WPF控件样式篇

Net开源项目推荐-WPF控件样式篇 HandyControlWPFDeveloperswpf-uidesignLive-ChartsAvalonDock HandyControl WPF控件库,比较常用的WPF开源控件库&#xff0c;对WPF原有控件样式都进行了重写和扩展&#xff0c;也增加了许多特别的控件&#xff0c;非常好用 github仓库&#x…

Day14—基于Langchain-chatchat搭建本地智能

一、基于Langchain-chatchat搭建本地智能 知识问答系统 1、项目介绍 基于 ChatGLM 等大语言模型与 Langchain 等应用框架实现&#xff0c;开一种利用 langchain 思想实现的基于本地知识库的问答应用&#xff0c;目标期望建立一套对中文场景与开源模型支持友好、可离线运行的知…

Claude3.5:编码螃蟹游戏就是这么轻松

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调或者LLM背后的基础模型重新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;则…

爱眼小妙招:台灯怎么选?学生如何正确使用台灯?

视力是心灵的窗户&#xff0c;尤其对于儿童来说更为重要。然而&#xff0c;随着现代生活方式的改变&#xff0c;孩子们面临越来越多的视力挑战。据统计&#xff0c;在近视学生中&#xff0c;近10%的人患有高度近视&#xff0c;而这一比例随年级的增加而逐渐上升。从幼儿园的小小…

电子杂志制作工具推荐:让你轻松成为编辑大人

在这个数字化的时代&#xff0c;电子杂志已经成为信息传播的重要载体。它不仅能够满足人们对阅读的需求&#xff0c;还能够提供更加丰富、互动的阅读体验。因此&#xff0c;掌握一款好用的电子杂志制作工具&#xff0c;已经成为每个编辑大人的必备技能。接下来告诉大家一个超简…

设置浏览器互不干扰

目录 一、查看浏览器文件路径 二、 其他盘新建文件夹Cache 三、以管理员运行CMD 四、执行命令 一、查看浏览器文件路径 chrome://version/ 二、 其他盘新建文件夹Cache D:\chrome\Cache 三、以管理员运行CMD 四、执行命令 Mklink /d "C:\Users\Lenovo\AppData\Loca…

计算机系统基础(一)

1. 引入——从源程序到可执行文件 了解高级语言编写的代码在后台是如何被编译并运行的 首先我们会编写一段代码&#xff0c;例如 #include<stdio.h>int main(){printf("hello world!\n");return 0; } 并把它命名为hello.c文件 预处理阶段 接下来通过命令…

WPF/C#:在DataGrid中显示选择框

前言 在使用WPF的过程中可能会经常遇到在DataGrid的最前或者最后添加一列选择框的需求&#xff0c;今天跟大家分享一下&#xff0c;在自己的项目中是如何实现的。 整体实现效果如下&#xff1a; 如果对此感兴趣&#xff0c;可以接下来看具体实现部分。 实践 假设数据库中的…

【EndNote】EndNote进行文献管理可能遇到的问题和解决方案

一、安装GB/T7714-2015(numberic)文献style windows&#xff1a;https://blog.csdn.net/qq_36235935/article/details/115629694 mac os&#xff1a;Mac版Endnote 20导入中文参考格式Chinese Std GBT7714 (numeric)-CSDN博客 安装完之后需要调整Author Name格式&#xff1a;…

Python文件与面向对象知识点

目录 文件的基本概念 文件的读取 文件的追加 文件的写入 with语句 知识总结 面向对象的基本概念 类和实例 对象的属性和方法 类属性与方法 面向对象的三大特性 知识总结 文件的基本概念 文件的读取 文件的追加 文件的写入 with语句 知识总结 面向对象的基本概念 …

docker拉取镜像一直在加载中,且会提示error pulling image configuration

1、增加国内镜像配置 #查看文件内容 sudo vim /etc/docker/daemon.json如果没有该文件&#xff0c;则需要在/etc/docker中创建一个daemon.json 文件 创建文件 vim daemon.json#文件中添加以下json {"registry-mirrors":["https://docker.mirrors.ustc.edu.cn/…

第六十六天打卡 | 卡码网101 孤岛的总面积、卡码网102 沉没孤岛、卡码网103 水流问题、卡码网104 建造最大岛屿

卡码网101 孤岛的总面积 这一题在昨天的基础上&#xff0c;将比较得出最大孤岛面积的逻辑改为统计所有孤岛面积之和的逻辑即可。 最近做项目的时候也发现&#xff0c;很多时候代码逻辑能够复用最好就不要再自己写&#xff0c;防止出错&#xff0c;当然刷代码题的时候不…

V4L2读取摄像头资源

1.V4L2 它是Linux内核中标准的关于视频驱动程序&#xff0c;Video for Linux 2&#xff0c;简称V4L2。 它为Linux下的视频驱动提供了统一的接口&#xff0c;使得应用程序可以使用统一的API操作不同的视频设备。 V4L2支持三类设备&#xff1a;视频输入输出设备、VBI设备和rad…

LeetCode---402周赛

题目列表 3184. 构成整天的下标对数目 I 3185. 构成整天的下标对数目 II 3186. 施咒的最大总伤害 3187. 数组中的峰值 一、构成整天的下标对数目 I & II 可以直接二重for循环暴力遍历出所有的下标对&#xff0c;然后统计符合条件的下标对数目返回。代码如下 class So…

概率论与数理统计期末复习

概率论常考知识点汇总 总括 1. 基础概率论 概率定义&#xff1a;理解概率是事件发生的可能性度量&#xff0c;范围从0&#xff08;不可能&#xff09;到1&#xff08;必然发生&#xff09;。概率公理&#xff1a;掌握概率的三大公理&#xff0c;即非负性、规范性和可加性。条…

HTML静态网页成品作业(HTML+CSS)——美食火锅介绍网页(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…

微信对话生成器2.0版本

微信对话生成器2.0版&#xff0c;这是一款革命性的通讯辅助工具&#xff0c;在数字通信领域带来了新的创新浪潮。这一升级版的生成器不仅囊括了从基本的文字编辑、格式调整到语音转换的多种功能&#xff0c;更重要的是&#xff0c;它提供了模拟真实对话的能力&#xff0c;使得用…

容器之对齐构件

代码&#xff1a; #include <gtk-2.0/gtk/gtk.h> #include <glib-2.0/glib.h> #include <gtk-2.0/gdk/gdkkeysyms.h> #include <stdio.h>int main(int argc, char *argv[]) {gtk_init(&argc, &argv);GtkWidget *window;window gtk_window_ne…

C++ 72 之 友元和类模版

#define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespace std; #include <string>// 写法2&#xff1a; // template<class T1, class T2> // class Students12;// 要提前用到Students12&#xff0c;需要在前面先让编译器见过Students12才可…