Vue3-完成任意组件之间的传值

一、props(只限于父子之间,不嫌麻烦可以不断传)

父给子传值,子接收defineProps

父给子传事件,子接收defineProps,并触发事件的时候传值,然后父通过事件的回调函数拿到子传的值

75c6008e003c405f8657c6b535dba06a.jpeg

二、mitt(自定义事件)

        首先需要在utils文件夹下引入mitt,三步骤:引入,调用,暴露

0707567d9adc466f8c15b6f55fdbf02c.png

        然后是在需要传值之间的组件引入mitt,先绑定事件,用来组件之间传值,然后传值的组件触发这个事件。

        一般来看,接收的一方是绑定事件的,就如同父子组件之间的子传父一般,传值的一方触发接收一方的事件,从而调用回调函数来接收值。

12cd0389feff4407bf53693e8993f6ee.png

        要记得解绑事件,减少内存负担

789a6d4d25b841b89d1848d809ff5a4b.png

三、v-model(UI库底层逻辑)

338e89114ec9438ab0c94d3c0a377c71.png

原生dom,如<input>中,event需要带.target,在自定义组件和自定义事件中,则不需要,即

$event到底是啥? 啥时候能.target
对于原生事件,$event就是事件对象=====》能.target

对于自定义事件,event就是触发事件时,所传递的数据=====》不能.target

自定义组件传递多个值并且修改变量名

77bfc46712b042319602ddb514cec801.png

改成想传的变量值的名

ed58754d95b145be8d06071d99c160cc.png

子组件中修改接收的变量名和触发事件名

b1d138baa4354e5ba100231e65b4e12e.png

四、$attrs

父组件传了多个值,但是子组件中只接收了部分,剩下的传值会在$attrs中保留着

8587deebee31403ab2ab0571870673eb.png

a7a13163904d4a5ea75397b77f535b9d.png

v-bind也可以用于父传子

f2374b4af8f04742b4aed6d4cefd38ac.png

也一样会被存在$attrs中

f1f97d32d47c42559eccb3637964e62b.png

$attrs可以用于爷传孙

40328052ab0c46ee8717ec35dc00dd4c.png

fda35b112de34a5aa68408c1d1f02955.png

五、$refs、$parent

1.概述

        $refs用于:父一>子。

        $parent用于:子一>父。

2.原理如下

        $refs值为对象,包含所有被 ref 属性标识的 DOM 元素或组件实例。

        $parent值为对象,当前组件的父组件实例对象。

3.具体做法(利用ref传值)

子组件中,通过defineExpose将值暴露出去

15c9d79501004f569e8850e96d2ce87c.png

父组件中,通过ref拿到子组件实例对象,也包含了值

56a5eedfddcc4711a10404b2d74b8a22.png

 $refs拿到所有儿子

 $parent拿到所有父亲

六、provide和inject(祖孙之间传值,不打扰第三方)

爷组件中。值得注意的是,provide中ref对象是不需要.value的

650fea9765264545808b56a0da0386ef.png

子孙组件中

0e3219b8003e4b81aab912b670902791.png

也可以在未接收到爷组件传值时,设置一个默认值

89113055cbc34161b9e41f900641cd40.png

除此之外,祖先也可以给后代provide函数,即可以让后代通过调用函数来给祖先传值。

祖先组件

f534e127c8af45619bf5c1667d5cc8e1.png

后代组件,函数也可以设置默认值,即(x:any)=>{}。

041f05d71cfd451082a1365cee79052f.png

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

R语言将list转变为dataframe(常用)

在R语言使用中常常遇到list文件需要转变为dataframe格式文件处理。这是需要写循环来进行转换。IOBR查看其收录的相关基因集(自备)_iobr_deg-CSDN博客 示例文件 list文件&#xff1a; 循环转换为dataframe data <- signature_tme dat <- as.data.frame(t(sapply(data, …

【AI的未来 - AI Agent系列】【MetaGPT】0. 你的第一个MetaGPT程序

《MetaGPT智能体开发入门》开课&#xff0c;跟着课程&#xff0c;学习MetaGPT智能体开发。 0. 安装MetaGPT 请确保你的系统已安装Python 3.9。你可以通过以下命令进行检查&#xff1a; python3 --version下面是具体的安装命令&#xff1a; 安装命令 pip install metagpt如…

完美解决报错Please verify that the package.json has a valid “main“ entry处理方法

出现下图中的错误 &#xff0c;说明缺少main入口 解决方法&#xff1a; 1.删除 node_modules 和 package-lock.json这两个文件 2.命令行输入npm i 会重新下载包 3.重新执行检查没有报错

Centos安装RocketMQ之双主双从模式(同步双写方式)

目录 前言 一、总体架构 二、环境准备 1、文件准备 2、服务器换环境 3、防火墙配置 4、创建消息存储路径 三、配置文件修改 1、master1配置修改 2、slave2配置修改 3、master2配置修改 4、slave1配置修改 四、启动脚本修改 五、启动服务 1、启动NameServe集群 ​编…

阿里云高性能云服务器_云主机_云服务器详解

阿里云高性能云服务器60%单实例最大性能提升&#xff0c;35Gbps内网带宽&#xff0c;网络增强&通用型云服务器、本地SSD型云服务器、大数据型云服务器、GPU异构型云服务器&#xff0c;阿里云百科aliyunbaike.com分享阿里云高性能云服务器&#xff1a; 阿里云高性能云服务器…

【simple-admin】FMS模块如何快速接入阿里云oss 腾讯云cos 服务 实现快速上传文件功能落地

让我们一起支持群主维护simple-admin 社群吧!!! 不能加入星球的朋友记得来点个Star!! https://github.com/suyuan32/simple-admin-core 一、前提准备 1、goctls版本 goctls官方git:https://github.com/suyuan32/goctls 确保 goctls是最新版本 v1.6.19 goctls -v goct…

(十一)IIC总线-AT24C02-EEPROM

文章目录 IIC总线篇AT24C02-EEPROM篇主要特性引脚说明AT24Cxx用几位数据地址随机寻址的(存储器组织)AT24C02设备操作AT24CXX设备寻址EEPROM写操作的种类EEPROM读操作的种类实现单字节写实现任意读读写应用 IIC总线篇 前面介绍过了&#xff0c;请参考 (十)IIC总线-PCF8591-ADC/…

手把手教你用 Stable Diffusion 写好提示词

Stable Diffusion 技术把 AI 图像生成提高到了一个全新高度&#xff0c;文生图 Text to image 生成质量很大程度上取决于你的提示词 Prompt 好不好。 前面文章写了一篇文章&#xff1a;一份保姆级的 Stable Diffusion 部署教程&#xff0c;开启你的炼丹之路 本文从“如何写好…

前端基础知识

一、脚本script 定义&#xff1a;脚本简单地说就是一条条的文字命令&#xff0c;这些文字命令是可以看到的&#xff0c;脚本程序在执行时&#xff0c;是由系统的一个解释器&#xff0c;将其一条条的翻译成机器可识别的指令&#xff0c;并按程序顺序执行 作用&#xff1a;可以…

element:日历 / 使用记录

一、预期效果 Element - The worlds most popular Vue UI framework element默认样式 目标样式 二、Calendar 属性 参数说明类型可选值默认值value / v-model绑定值Date/string/number——range时间范围&#xff0c;包括开始时间与结束时间。开始时间必须是周一&#xff0c;…

【HuggingFace Transformer库学习笔记】基础组件学习:Evaluate

基础组件学习——Evaluate Evaluate使用指南 查看支持的评估函数 # include_community&#xff1a;是否添加社区实现的部分 # with_details&#xff1a;是否展示更多细节 evaluate.list_evaluation_modules(include_communityFalse, with_detailsTrue)加载评估函数 accuracy…

Linux终端常见用法总结

熟悉Linux终端的基础用法和常见技巧可以极大提高运维及开发人员的工作效率&#xff0c;笔者结合自身学习实践&#xff0c;总结以下终端用法供同行交流学习。 常 见 用 法 &#x1f3af; 1&#xff1a;快捷键 1.1 Alt . 在光标位置插入上一次执行命令的最后一个参数。 1.2 Ct…

图片特效/增强GUI程序

程序下载地址&#xff1a;mendianyu/pictureConvert: 图片特效/增强GUI程序&#xff0c;借助百度接口实现人像动漫化&#xff0c;模糊图片变清晰等等功能 (github.com) 图片特效/增强GUI程序 借助百度接口实现人像动漫化&#xff0c;模糊图片变清晰等等功能 程序介绍 运行Ima…

码牛课堂首推——鸿蒙南北双向开发学习路线图标准版~

鸿蒙&#xff01;鸿蒙&#xff01;鸿蒙&#xff01; 要说2023-2024年IT圈最火爆的名词&#xff0c;一定是鸿蒙&#xff01; 2023年9月25日&#xff0c;华为发布会正式宣布2024年第一季度将推出HarmonyOS NEXT版本&#xff0c;这意味着鸿蒙原生应用开发将彻底摆脱Android手机系…

redis夯实之路-集群详解

Redis有单机模式和集群模式。 集群是 Redis 提供的分布式数据库方案&#xff0c;集群通过分片( sharding )来实现数据共享&#xff0c;并提供复制和故障转移。集群模式可以有多个 master 。使用集群模式可以进一步提升 Redis 性能&#xff0c;分布式部署实现高可用性&#xff…

【Kafka-3.x-教程】-【二】Kafka-生产者-Producer

【Kafka-3.x-教程】专栏&#xff1a; 【Kafka-3.x-教程】-【一】Kafka 概述、Kafka 快速入门 【Kafka-3.x-教程】-【二】Kafka-生产者-Producer 【Kafka-3.x-教程】-【三】Kafka-Broker、Kafka-Kraft 【Kafka-3.x-教程】-【四】Kafka-消费者-Consumer 【Kafka-3.x-教程】-【五…

ROS无人机开发常见错误

飞控部分 一、解锁时飞控不闪红灯&#xff0c;无任何反应&#xff0c;地面站也无报错 解决办法&#xff1a; 打开地面站的遥控器一栏 首先检查右下角Channel Monitor是否有识别出遥控各通道的值&#xff0c;如果没有&#xff0c;检查遥控器是否打开&#xff0c;遥控器和接收…

【Python】Python语言 3小时速通(有C语言基础版)

python从入门到实践 变量 message"hello world"并不需要指出变量类型 方法 tittle()#以首字母大写的形式输出单词upper()#全部大写输出lower()#全部小写输出存储数据时经常使用lower&#xff0c;因为无法确保数据是大写还是小写 rstrip()#输出删除字符串尾部多余…

Linux系统中使用ln命令创建软连接

大家应该和我一样&#xff0c;第一次听到软连接这个词时感觉好高级啊&#xff0c;但其实也就那么回事&#xff0c;你完全可以将他类比为Windows系统中的快捷方式。 链接只是一个指向&#xff0c;并不是物理移动&#xff0c;类似Windows系统的快捷方式 1.功能和语法 功能&…

C#进阶学习

目录 简单数据结构类ArrayList声明增删查改遍历装箱拆箱 Stack声明增取查改遍历装箱拆箱 Queue声明增取查改遍历 Hashtable声明增删查改遍历装箱拆箱 泛型泛型分类泛型的作用泛型约束 常用泛型数据结构类List声明增删查改遍历 Dictionary声明增删查改遍历 LinkedList声明增删查…