Vue3 实现跨组件通信，provide/inject 一步到位#前端
ztj100 2024-11-12 14:22 12 浏览 0 评论
Vue3的组件通信方式。
在一些较深层级的组件通信中，如果使用props通信需要多级传递，而provide和 inject则可以一步到位。比如这里的祖辈组件结孙子组件传递数据，可以优先考虑provide/inject通信。先引入provide，provide需要携带两个参数，一个是给后代组件的key，一个是传递的值。
由于provide传递的值是一个对象或返回一个对象的函数，把这里的value去掉，后代组件使用inject即可接收到祖辈组件传递的数据。同样需要先引入 inject，inject里的字符对应provide的第一个参数。现在这里的深层级组件就实现了通信，那它是否能对数据保持响应式？在祖辈组件里利用input来改变传递的值。看一下后代组件接收数据的变化，可以看到是可以实现同时变化的。
不仅如此，在后代组件中也能修改祖辈组件传递过来的值，因为此时它们所指向的是同一个对象。如果你不希望后代组件修改祖组件传递过来的数据，可以在provide中加上readonly，表示它是一个只读数据。在多个参数的情况下不想使用多个provide，使用数组来传参就能实现替换。
drovide其实还可以实现事件传递，利用事件传递实现后代组件修改祖组件的数据。border nict接收的则是一个数组，想要全局定义也是支持的。在main.js或APP.vue文件中都可以定义。
本期内容就到这，记得三连，下期再见。
相关推荐
- 告别手动操作:一键多工作表合并的实用方法
-
通常情况下，我们需要将同一工作簿内不同工作表中的数据进行合并处理。如何快速有效地完成这些数据的整合呢？这主要取决于需要合并的源数据的结构。...
- 【MySQL技术专题】「优化技术系列」常用SQL的优化方案和技术思路
-
概述前面我们介绍了MySQL中怎么样通过索引来优化查询。日常开发中，除了使用查询外，我们还会使用一些其他的常用SQL，比如INSERT、GROUPBY等。对于这些SQL语句，我们该怎么样进行优化呢...
- 9.7寸视网膜屏原道M9i双系统安装教程
-
泡泡网平板电脑频道4月17日原道M9i采用Win8安卓双系统，对于喜欢折腾的朋友来说，刷机成了一件难事，那么原道M9i如何刷机呢？下面通过详细地图文，介绍原道M9i的刷机操作过程，在刷机的过程中，要...
- 如何做好分布式任务调度——Scheduler 的一些探索
-
作者：张宇轩，章逸，曾丹初识Scheduler找准定位：分布式任务调度平台...
- mysqldump备份操作大全及相关参数详解
-
mysqldump简介mysqldump是用于转储MySQL数据库的实用程序，通常我们用来迁移和备份数据库；它自带的功能参数非常多，文中列举出几乎所有常用的导出操作方法，在文章末尾将所有的参数详细说明...
- 大厂面试冲刺，Java“实战”问题三连，你碰到了哪个?
-
推荐学习...
- 亿级分库分表，如何丝滑扩容、如何双写灰度
-
以下是基于亿级分库分表丝滑扩容与双写灰度设计方案，结合架构图与核心流程说明：一、总体设计目标...
- MYSQL表设计规范（mysql表设计原则）
-
日常工作总结，不是通用规范一、表设计库名、表名、字段名必须使用小写字母，“_”分割。...
- 怎么解决MySQL中的Duplicate entry错误?
-
在使用MySQL数据库时，我们经常会遇到Duplicateentry错误，这是由于插入或更新数据时出现了重复的唯一键值。这种错误可能会导致数据的不一致性和完整性问题。为了解决这个问题，我们可以采取以...
- 高并发下如何防重?（高并发如何防止重复）
-
前言最近测试给我提了一个bug，说我之前提供的一个批量复制商品的接口，产生了重复的商品数据。...
- 性能压测数据告诉你MySQL和MariaDB该怎么选
-
1.压测环境为了尽可能的客观公正，本次选择同一物理机上的两台虚拟机，一台用作数据库服务器，一台用作运行压测工具mysqlslap，操作系统均为UbuntuServer22.04LTS。...
- 屠龙之技 --sql注入 不值得浪费超过十天 实战中sqlmap--lv 3通杀全国
-
MySQL小结发表于2020-09-21分类于知识整理阅读次数：本文字数：67k阅读时长≈1:01...
- 破防了，谁懂啊家人们:记一次 mysql 问题排查
-
作者：温粥一、前言谁懂啊家人们，作为一名java开发，原来以为mysql这东西，写写CRUD，不是有手就行吗；你说DDL啊，不就是设计个表结构，搞几个索引吗。...
- MySQL 之 Performance Schema（mysql安装及配置超详细教程）
-
MySQL之PerformanceSchema介绍PerformanceSchema提供了在数据库运行时实时检查MySQL服务器的内部执行情况的方法，通过监视MySQL服务器的事件来实现监视内...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- node卸载 (33)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- exceptionininitializererror (33)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)