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

news/2024/7/24 12:30:37 标签: vue.js, 前端, javascript

一、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

 

 


http://www.niftyadmin.cn/n/5321711.html

相关文章

Python中的列表跟C/C++里面的数组什么关系?

你好&#xff0c;我是安然无虞。 文章目录 Python数据类型列表创建列表新增列表元素append方法insert方法 删除列表元素pop方法remove方法 查找列表元素in相关index方法 下标访问列表元素负索引 遍历列表元素子列表提取拼接列表 相关extend方法 列表常用接口汇总列表操作列表的…

组织管理开源项目邀请入伙

背景 企业数字化平台基础 企业数字化或者信息化&#xff08;这两者有一些区别&#xff09;实施过程中&#xff0c;基本上一个系统、产品的实施、上线都可能会碰到组织人员集成问题&#xff0c;组织机构一般组织机构部门&#xff0c;岗位&#xff0c;人员&#xff0c;可能会有…

centos 7更改最大文件打开数

1、在之前修改文件最大连接数等直接修改 /etc/security/limits.conf文件即可&#xff0c;最近出现几次修改未生效问题。 2、经过排查发现可能跟ssh升级为8版本有关&#xff0c;尚未验证。 3、解决办法&#xff1a; ①修改 /etc/security/limits.conf文件&#xff0c;修改内容…

迎接数智时代:数字经济引领可视化转型

在数字经济的持续崛起下&#xff0c;企业正在进行数字化转型&#xff0c;其中可视化和数智化成为关键驱动力。NFC技术的应用更是为这一转型提供了新的可能性。 数字经济塑造未来&#xff1a; 数字经济的兴起标志着企业正进入一个全新的时代。通过数字技术&#xff0c;企业可…

当面试问你接口测试时,不要再说不会了!

很多人会谈论接口测试。到底什么是接口测试&#xff1f;如何进行接口测试&#xff1f;这篇文章会帮到你。 01 前端和后端 在谈论接口测试之前&#xff0c;让我们先明确前端和后端这两个概念。 前端是我们在网页或移动应用程序中看到的页面&#xff0c;它由 HTML 和 CSS 编写而…

电脑扩容升级硬盘选1T还是2T

SSD固态有必要升级2TB吗&#xff1f;----------吴中函 某大二学生用的一台笔记本电脑&#xff0c;512GB的硬盘空间已经严重不够用了&#xff0c;想给笔记本扩容升级一下硬盘&#xff1b; 这位学生是学设计专业的、平时也喜欢摄影、电脑里面也装了一些游戏&#xff0c;经常整理、…

Ubuntu root 远程登录失败

背景&#xff1a;设置了两个系统用户&#xff1a;root、test&#xff1b;test可以登录&#xff0c;可以使用su 命令切换root用户登录成功&#xff1b; 但是直接用root登录&#xff0c;会报错。 查看登录日志的方法&#xff1a; 需要两个远程窗口&#xff0c;在第一个远程窗口…

QT 小组件 列表框以及微调框

.cpp文件 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);QListWidgetItem *pPhone new QListWidgetItem;pPhone->setText("西瓜");pPhone->…