Vue3:组件间通信-provide和inject实现祖先组件与后代组件间直接通信

一、情景说明

我们学习了很多的组件间通信
这里在学习一种,祖先组件与后代组件间通信的技术
这里的后代,可以是多层继承关系,子组件,子子组件,子子子组件等等。

  • 在祖先组件中通过provide配置向后代组件提供数据
  • 在后代组件中通过inject配置来声明接收数据

二、案例

1、父组件

  import { ref,reactive,provide } from "vue";// 数据let money = ref(100)let car = reactive({brand:'奔驰',price:100})// 用于更新money的方法function updateMoney(value:number){money.value += value}// 提供数据provide('moneyContext',{money,updateMoney})provide('car',car)

2、子子组件
接收到之后,就可以当成自己的变量直接操作了

  import { inject } from 'vue';// 注入数据let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(x:number)=>{}})let car = inject('car')

注意,我们可以发现,provide可以传递变量,也可以传递函数
当传递函数的时候,后代组件就可以调用该祖先组件的函数,从而,间接的操作祖先组件中的变量
实现,反向通信

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

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

相关文章

设计模式:工厂模式和抽象工厂模式的区别

定义 工厂模式(Factory Pattern)通常指的是工厂方法模式(Factory Method Pattern),它定义了一个创建对象的方法,由子类决定要实例化的类。工厂方法让类的实例化推迟到子类。 抽象工厂模式(Abstract Factory Pattern)提供了一个接口,用于创建相关或依赖对象的家族,而…

设计模式:工厂模式

定义 工厂模式(Factory Pattern),特别是工厂方法模式(Factory Method Pattern),是一种创建型设计模式,它定义了一个创建对象的接口,但将实例化的类推迟到子类中进行。这样&#xff…

基于springboot+vue+Mysql的在线考试系统

开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:…

mysql 从同一个表获取数据update自身报错一例

我在mysql中,想将一些记录的某个字段,改成跟某条记录的该字段的值一样,语句如下: update org_user set password(select password from org_user where loginnameadmin limit 1) where userid>1000;结果就报错了,提…

Linux操作系统之防火墙、redis安装

目录 一、防火墙 1、防火墙的类别 2、安装iptables(四表五链) 一、防火墙 1、防火墙的类别 安全产品 杀毒 针对病毒,特征篡改系统中文件杀毒软件针对处理病毒程序 防火墙 针对木马,特征系统窃密 防火墙针对处理木马 防火墙分为两种 硬件…

Codeforces Round 824 (Div. 2) D. Meta-set

题目 思路&#xff1a; #include <bits/stdc.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second #define lson p << 1 #define rson p << 1 | 1 const int maxn 1e6 5, inf 1e18, maxm 4e4 5; c…

MXNet库

MXNet&#xff08;MatriX Network&#xff09;是一个开源的深度学习框架&#xff0c;最初由亚马逊公司开发并于2015年发布。它是一个高效、灵活且可扩展的框架&#xff0c;旨在支持大规模的分布式深度学习模型训练和部署。 以下是 MXNet 库的一些主要特点和组成部分&#xff1…

设计模式——工厂模式01

工厂模式 定义&#xff1a;工厂模式是创建子类实例化对象的一种方式&#xff0c;屏蔽了创造工厂的内部细节。把创建对象与使用对象进行拆分&#xff0c;满足单一职责。如果需要向工厂中添加新商品&#xff0c; 只需要扩展子类再重写其工厂方法&#xff0c;满足开闭原则。 设计…

01 计算机网络发展与分类

计算机网络&#xff1a;计算机技术与通信技术的结合。 阶段一&#xff1a;早期网络&#xff1a;ARPAnet。 阶段二&#xff1a;厂商独立发展阶段 阶段三&#xff1a;标准化阶段&#xff1a;ISO,TCP/IP 计算机网络分类 计算机网络分类1&#xff1a;通信子网和资源子网 通信子…

掌握ChatGPT技巧,写出拔尖学术论文

ChatGPT无限次数:点击直达 掌握ChatGPT技巧&#xff0c;写出拔尖学术论文 引言 在当今数字化时代&#xff0c;人工智能技术的发展对学术研究也产生了深远影响。其中&#xff0c;ChatGPT作为一种强大的自然语言处理工具&#xff0c;为学术界提供了全新的可能性。本文将介绍如何…

Android Binder——Java层介绍(三)

一、简介 对于 Android 系统,一般是从 java 层到 native 层,再到 kernel 驱动层,形成一个完整的软件架构。Android 系统中的 Binder IPC 通信机制的整体架构也是如此,Java 和 C++ 层都定义有同样功能的供应用程序使用的 Binder 接口。然而 Java 层中 Framework 层的 Servic…

第十一届能源与环境研究国际会议-可再生能源走向脱碳化(ICEER 2024)即将召开!

能源和环境是当今世界至关重要的研究和教育领域&#xff0c;持续的气候危机和对可持续发展战略的迫切需求&#xff0c;需要从能源科学到地球工程等广泛领域的变革性工程解决方案和创新。ICEER 2024为来自学术界&#xff0c;研究中心和全球工业界的工程师&#xff0c;研究人员和…

以太网布局指南

2层板 顶层走信号线以及地平面底层走信号线以及地平面信号走线应至少沿一条边被接地或接地走线包围如果使用地走线&#xff0c;应接本层接地平面&#xff0c;与上层接地平面解耦。 4层板 当信号走线被重新引用到功率平面时&#xff0c;在地平面和功率平面之间需要去耦电容器(0…

4月04日,每日信息差

&#x1f396; 素材来源官方媒体/网络新闻 &#x1f384; 地震预警App被曝收10元年费&#xff0c;回应称仅限苹果系统 &#x1f30d; 2024清明档首日票房破2亿 &#x1f30b; 浙江省杭州市余杭区设立2亿元网络微短剧发展基金 &#x1f381; 抖音拟以超 7.5 亿元收购海联金汇旗下…

Vue3 Ajax(axios)

Vue 版本推荐使用 axios 来完成 ajax 请求。 安装方法 使用 cdn: <script src"https://unpkg.com/axios/dist/axios.min.js"></script> 使用 npm: $ npm install axios GET 方法 我们可以简单的读取 JSON 数据&#xff1a; const app {data() {r…

蓝桥杯刷题 前缀和与差分-[2080]求和(C++)

题目描述 给定 n 个整数 a1, a2, , an &#xff0c;求它们两两相乘再相加的和&#xff0c;即 S a1 a2 a1 a3 a1 an a2 a3 an-2 an-1 an-2 an an-1 an 输入格式 输入的第一行包含一个整数 n 。 第二行包含 n 个整数 a1, a2, an。 输出格式 输…

langchain Chroma 构建本地向量数据库

langchain Chroma 构建本地向量数据库 # import from langchain_community.document_loaders import TextLoader from langchain_community.embeddings.sentence_transformer import (SentenceTransformerEmbeddings, ) from langchain_community.embeddings import HuggingFa…

SAP HCM 多成本中心薪酬过账标准程序解读

SAP HCM薪酬过账会涉及到CO对象&#xff0c;CO对象主要是成本中心、WBS、内部订单、订单等&#xff0c;成本中心有多个维护地方0001信息类型0027信息类型等&#xff0c;那么成本中心多个地方维护&#xff0c;优先级是如何&#xff0c;0027>1018>0001,也就是说人身上的优先…

【数据结构(一)】初识数据结构

❣博主主页: 33的博客❣ ▶文章专栏分类: Java从入门到精通◀ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你学更多数据结构知识 目录 1.前言2.集合架构3.时间和空间复杂度3.1算法效率3.2时间复杂度3.2.1大O的渐进…

IP知识详解

IP基本认识 IP 在 TCP/IP 参考模型中处于第三层&#xff0c;也就是网络层。 网络层的主要作用是&#xff1a;实现主机与主机之间的通信&#xff0c;也叫点对点&#xff08;end to end&#xff09;通信。 网络层与数据链路层有什么关系呢&#xff1f; IP 的作用是主机之间通信…