Vue3组件通讯——自定义事件(子->父)
需求如下:
1.在子组件中,当用户点击提交按钮后,更新数据库
2.数据更新成功后,子组件通知父组件getUserInfo函数,重新获取数据,同步更新
3.子组件等待getUserInfo函数执行完毕后,调用init函数,获取父组件更新后的数据
在子组件中,当用户点击提交按钮后,更新数据库
// 提交表单的方法
async function submit() {// 更新用户配置文件const res = await updateUserProfile(form);if (res.code === 200) {ElMessage.success(res.msg);await emitEventAndUpdate() //调用自定义事件} else {ElMessage.error(res.msg || "更新失败");}
}
2.数据更新成功后,子组件通知父组件getUserInfo函数,重新获取数据,同步更新
在子组件中定义 自定义事件,父组件中定义该事件需要调用的方法
//在子组件中定义自定义事件
const emit = defineEmits(['updateUserProfile']);
//在父组件中,定义该事件所需要调用的方法
<userInfo @updateUserProfile="getUserInfo"/>
3.子组件等待getUserInfo函数执行完毕后,调用init函数,获取父组件更新后的数据
// 在子组件促发事件,并等待父组件处理完成
async function emitEventAndUpdate() {await new Promise((resolve) => {emit('updateUserProfile',resolve); // 将 resolve 传递给父组件});init(); // 等待事件完成后调用 init()
}//父组件处理完成后,执行resolve()表示处理完成
async function getUserInfo(resolve) {const res = await getUserProfile().then(res => {if(res.code==200){Object.assign(user,res.data)userStore.setUserInfo(toRaw(user))}});resolve(); //调用 resolve 表示事件处理完成
};
相关文章:
Vue3组件通讯——自定义事件(子->父)
需求如下: 1.在子组件中,当用户点击提交按钮后,更新数据库 2.数据更新成功后,子组件通知父组件getUserInfo函数,重新获取数据,同步更新 3.子组件等待getUserInfo函数执行完毕后,调用init函数…...
GLSL 着色器语言
GLSL 着色器语言 1. 着色器语言基础1.1 数据类型1.2 数据类型的基本使用1.3 运算符1.4 各个数据类型的构造函数1.5 类型转换1.6 存储限定符1.7 插值限定符1.8 一致块1.9 layout 限定符1.10 流程控制1.11 函数的声明和使用1.12 片元着色器中浮点及整型变量精度的指定1.13 程序的…...
如何创建一个 Vue.js 工程
创建一个 Vue.js 工程 可以分为以下几个步骤: 安装 Node.js 和 npm:Vue.js 依赖于 Node.js 和 npm,因此首先需要在计算机上安装 Node.js 和 npm。可以从 Node.js 的官方网站(https://nodejs.org/)下载并安装。 安装 V…...
Mysql 性能优化:覆盖索引
概述 覆盖索引(Covering Index)是一个 MySQL 查询优化技术,它指的是一个索引包含了查询所需的所有字段的数据,因此不需要回表(访问数据表的行)就可以完成查询。使用覆盖索引可以显著提高查询性能ÿ…...
vulnhub靶场【DC系列】之7
前言 靶机:DC-7,IP地址为192.168.10.13 攻击:kali,IP地址为192.168.10.2 都采用VMWare,网卡为桥接模式 对于文章中涉及到的靶场以及工具,我放置在网盘中,链接:https://pan.quark…...
iOS - 消息机制
1. 基本数据结构 // 方法结构 struct method_t {SEL name; // 方法名const char *types; // 类型编码IMP imp; // 方法实现 };// 类结构 struct objc_class {Class isa;Class superclass;cache_t cache; // 方法缓存class_data_bits_t bits; // 类的方法…...
Wireshark 学习笔记1
1.wireshark是什么 wireshark是一个可以进行数据包的捕获和分析的软件 2.基本使用过程 (1)选择合适的网卡 (2)开始捕获数据包 (3)过滤掉无用的数据包 (4)将捕获到的数据包保存为文件…...
Oracle OCP考试常见问题之线上考试流程
首先要注意的是:虽然Oracle官方在国际上取消了获得OCP认证需要培训记录的要求,但在中国区,考生仍然需要参加Oracle的官方或者其合作伙伴组织的培训,并且由Oracle授权培训中心向Oracle提交学员培训记录。考生只有在完成培训并通过考…...
微信小程序之历史上的今天
微信小程序之历史上的今天 需求描述 今天我们再来做一个小程序,主要是搜索历史上的今天发生了哪些大事,结果如下 当天的历史事件或者根据事件选择的历史事件的列表: 点击某个详细的历史事件以后看到详细信息: API申请和小程序…...
记一次k8s下容器启动失败,容器无日志问题排查
问题 背景 本地开发时,某应用增加logback-spring.xml配置文件,加入必要的依赖: <dependency><groupId>net.logstash.logback</groupId><artifactId>logstash-logback-encoder</artifactId><version>8…...
【HarmonyOS】纯血鸿蒙真实项目开发---经验总结贴
项目场景: 将已有的Web网页接入到原生App。 涉及到一些网页回退、webviewController执行时机报错1710000001、位置定位数据获取、拉起呼叫页面、系统分享能力使用等。 问题描述 我们在选项卡组件中,在每个TabContent内容页中使用web组件加载网页。 在…...
kettle做增量同步,出现报错:Unrecognized VM option ‘MaxPermSize-256m‘
本文内容来自YashanDB官网,原文内容请见:https://yashandb.com/newsinfo/7863039.html?templateId1718516 问题现象 kettle在增量同步过程,出现报错:Unrecognized VM option ‘MaxPermSize256m’ 问题的风险及影响 无法使用ke…...
网络安全、Web安全、渗透测试之笔经面经总结(三)
本篇文章涉及的知识点有如下几方面: 1.什么是WebShell? 2.什么是网络钓鱼? 3.你获取网络安全知识途径有哪些? 4.什么是CC攻击? 5.Web服务器被入侵后,怎样进行排查? 6.dll文件是什么意思,有什么…...
计算机的错误计算(二百零五)
摘要 基于一位读者的问题,提出题目:能用数值计算证明 吗?请选用不同的点(即差别大的数)与不同的精度。实验表明,大模型理解了题意。但是,其推理能力值得商榷。 例1. 就摘要中问题࿰…...
Vue3(一)
1.Vue3概述 Vue3的API由Vue2的选项式API改为了组合式API。但是,也是Vue2中的选项式API也是兼容的。 2.创建Vue3项目 create-vue 是 Vue 官方新的脚手架工具,底层切换到了 vite。使用create-vue创建项目的步骤如下: 安装 create-vue npm i…...
【项目】修改远程仓库地址、报错jdk
一、修改远程仓库地址 进入你刚刚克隆到本地的仓库目录,执行以下命令来修改远程仓库的 URL,将其指向你自己的新仓库: cd 原仓库名 git remote set-url origin <你自己的新仓库的 Git 地址>补充: 错误分析: wa…...
实训云上搭建集群
文章目录 1. 登录实训云1.1 实训云网址1.2 登录实训云 2. 创建网络2.1 网络概述2.2 创建步骤 3. 创建路由器3.1 路由器名称3.1 创建路由器3.3 查看网络拓扑 4. 连接子网5. 创建虚拟网卡5.1 创建原因5.2 查看端口5.3 创建虚拟网卡 6. 管理安全组规则6.1 为什么要管理安全组规则6…...
豆包ai 生成动态tree 增、删、改以及上移下移 html+jquery
[豆包ai 生成动态tree 增、删、改以及上移下移 htmljquery) 人工Ai 编程 推荐一Kimi https://kimi.moonshot.cn/ 推荐二 豆包https://www.doubao.com/ 实现效果图 html 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF…...
【网络协议】IPv4 地址分配 - 第二部分
前言 在第 1 部分中,我们学习了 IPv4 地址的分配方式,了解了各种类型的 IPv4 地址,并进行了基础的子网划分(Subnetting)。在第 2 部分中,我们将继续学习子网划分,并引入一些新的概念。 【网络…...
攻防世界 bug
发现有Register界面,先去注册 登录以后发现以下界面,点击Manage显示you are not admin,并且在注册界面用admin为注册名时显示用户名已存在。初步推测是设法改变admin的密码取得权限。 在主界面一通操作并没有什么发现,去findpw…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
LLM基础1_语言模型如何处理文本
基于GitHub项目:https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken:OpenAI开发的专业"分词器" torch:Facebook开发的强力计算引擎,相当于超级计算器 理解词嵌入:给词语画"…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
Map相关知识
数据结构 二叉树 二叉树,顾名思义,每个节点最多有两个“叉”,也就是两个子节点,分别是左子 节点和右子节点。不过,二叉树并不要求每个节点都有两个子节点,有的节点只 有左子节点,有的节点只有…...
