vue3 兄弟子组件相互调用方法的实现思路及解决方法

需求背景:

vue实际开发过程中,可能需要在某一个子组件调用另一个子组件的方法,从而实现业务需求。
例如以下的一个业务场景。
在这里插入图片描述

如上就涉及到到组件B需要调用组件A的form验证方法。

解决思路:

利用共同的父组件C,我们可以在C组件通过ref来调用A组件的方法。
再在B组件内发射一个自定义事件,在组件C接受这个自定义事件的时候,进行A组件内的表单验证函数,书写一个回调函数(返还想要的参数,例如表单是否验证成功的布尔值)。
最后在B组件内接收在这回调函数所返还的值,进行自己的业务逻辑代码的书写。

代码实现:(参考)

组件A

      submitForm() {let fromVal = false;this.$refs.formRef.validate((val) => {fromVal = val;//是否验证成功});return fromVal;},

组件C:

      const validateFrom = (e) => {//触发A组件的表单验证方法let data = tabthirdRef.value.submitForm();e.callback(data);//把这个值回传到组件B};

组件B:

      let formValData = false;context.emit('validateFrom', {callback: (val) => {formValData = val;},});if(formValData){//通过表单验证业务逻辑代码}else {//未通过表单验证业务逻辑代码}

以上代码是逻辑实现,仅供参考。

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

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

相关文章

Spark 4:Spark Core 共享变量

广播变量 # coding:utf8 import timefrom pyspark import SparkConf, SparkContext from pyspark.storagelevel import StorageLevelif __name__ __main__:conf SparkConf().setAppName("test").setMaster("local[*]")sc SparkContext(confconf)stu_inf…

ES6——Promise

promise 含义:异步编程解决方案 特点:1、状态不受外界影响,状态有三种:pending、fulfilled、rejected 2、状态不可逆,只能pending -> fulfilled、pending -> rejected 缺点:无法取消、不设置回调函…

mysql数字开头字符串排序

表结构 CREATE TABLE building (id bigint NOT NULL,name varchar(255) CHARACTER SET utf8mb3 COLLATE utf8_general_ci DEFAULT NULL COMMENT 名称,full_name varchar(255) CHARACTER SET utf8mb3 COLLATE utf8_general_ci DEFAULT NULL COMMENT 全称,PRIMARY KEY (id) USIN…

javascript 将json数据导出excel

<el-button type"primary" plain v-on:click"jsonToExcel();">导出</el-button>jsonToExcel() {const data this.AlarmData;let head "城市,站点,时间,A相电流(A),B相电流(A),C相电流(A),SO2压力(MPa),CO压力(MPa),NOX压力(MPa),A相电压…

总结930

之前本打算每天学12h&#xff0c;践行了一周&#xff0c;一天最多也就学11.5h,在时间利用上感觉已经趋于饱和的了。 这个时候&#xff0c;时间统计法应该能发挥它应有的作用了&#xff0c;但就算详细记录每日时间支出&#xff0c;也不能从根本上解决问题。 一味的进行时间上的…

基于Springboot的宠物店管理系统(源代码+数据库)087

基于Springboot的宠物店管理系统(源代码数据库)087 一、系统介绍 本系统分为管理员、店员两种角色 店员角色包含以下功能&#xff1a; 登录、宠物主人管理、宠物管理、宠物医疗管理、宠物销售管理、宠物寄养管理、宠物用品管理、宠物日常服务管理、宠物常见问题、个人中心、…

Appium Android ——利用 TestNG 并行执行用例

目录 前言&#xff1a; 一、测试类 二、连接两个 Android 设备或启动两个虚拟机 三、项目路径下新建两个 testng.xml 四、开启两个 appium server 五、导出依赖 六、执行测试 七、查看报告 前言&#xff1a; Appium是一个流行的移动应用自动化测试工具&#xff0c;…

RAID6故障导致分区打不开的服务器数据恢复案例

服务器数据恢复环境&#xff1a; 一台infortrend存储&#xff0c;有一组由12块硬盘组建的RAID6&#xff0c;RAID6的所有空间划分给一个LUN并映射到WINDOWS系统上&#xff0c;WINDOWS系统上划分了一个GPT分区。 服务器故障&分析&#xff1a; 存储无法访问&#xff0c;经过检…

【代码随想录13】前 K 个高频元素

题目 给定一个非空的整数数组&#xff0c;返回其中出现频率前 k 高的元素。 示例 1: 输入: nums [1,1,1,2,2,3], k 2输出: [1,2] 示例 2: 输入: nums [1], k 1输出: [1] 提示&#xff1a; 你可以假设给定的 k 总是合理的&#xff0c;且 1 ≤ k ≤ 数组中不相同的元素…

北京汽车:传统车厂向“用户服务”转型的新范本

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 摘要&#xff1a;用户决定价值 英国大文豪狄更斯曾在《双城记》中说&#xff1a;“这是最好的时代&#xff0c;也是最坏的时代”。大浪淘沙之下&#xff0c;汽车产业…

C#为什么不能成为大学编程入门的首选?

大学编程入门不以C#作为首选的原因有多个因素。虽然C#是一种功能强大的编程语言&#xff0c;但在大学编程入门阶段&#xff0c;通常会选择其他语言作为首选&#xff0c;以下是一些可能的原因&#xff1a; 我这里刚好有嵌入式、单片机、plc的资料需要可以私我或在评论区扣个6 …

编程小白的自学笔记九(python爬虫入门+代码详解)

系列文章目录 编程小白的自学笔记八&#xff08;python中的多线程&#xff09; 编程小白的自学笔记七&#xff08;python中类的继承&#xff09; 编程小白的自学笔记六&#xff08;python中类的静态方法和动态方法&#xff09; 编程小白的自学笔记五&#xff08;Python类的…