Vue3 provide 和 inject 实现祖组件和后代组件通信

provide 和 inject 能够实现祖组件和其任意的后代组件之间通信:

 

一、provide 提供数据

我们在祖组件中使用provide 将数据提供出去。

使用provide 之前需要先进行引入:

import { provide } from "vue";

语法格式如下:

provide("数据名", 数据) 

例如:我们将祖组件中的person 使用provide提供出去

setup() {let person = reactive({name: "张三",age:18})provide("person", person);  // 将perosn 提供出去return {person}
}

二、inject 使用数据

我们在后代组件中使用inject 来使用数据。

使用inject之前需要在该组件中对其进行引入:

import { inject } from "vue";

使用语法:

let xxx = inject("数据名") ;

我们在后代组件中接受上面祖组件提供的person 数据

setup() {let person = inject("person");return {person}
}

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

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

相关文章

山西电力市场日前价格预测【2023-11-23】

日前价格预测 预测说明: 如上图所示,预测明日(2023-11-23)山西电力市场全天平均日前电价为148.77元/MWh。其中,最高日前电价为420.40元/MWh,预计出现在18:00。最低日前电价为0.00元/MWh,预计出…

微信小程序开发学习——页面布局、初始导航栏与跳转

1.盒模型 要求实现效果如图所示: 所有WXML元素都可以看作盒子,在WXSS中"box model”这一术语是用来设计和布局时使用盒模型本质上是一个盒子,封装周围的WXML元素它包括: 边距,边框,填充和实际内容,模…

RAW RGB YUV数据差异

目录 颜色与色彩空间 RAW图像 RGB图像 YUV图像 颜色与色彩空间 颜色 颜色是人眼感知到的现象,它是由光波的频率和强度所决定的,仅仅存在于人的眼睛和大脑中,因此为了方便描述颜色,引入了色彩空间。色彩空间 色彩空间&#xff…

C语言--数组与指针--打印字符串的n种方式

一.知识背景 一维数组名的含义 arr一般表示数组的起始地址(除了两种例外) 1.在定义数组的同一个函数中(不是形参),求sizeof(arr),求整个数组的字节数 2.在定义数组的同一个函数中(不是形参),&arr1,加整个数组的大小 (经常考试) 3.除上面以外,arr都表…

和鲸 × 暨大经管:高效 SAAS 服务持续赋能交叉学科应用型数据人才培养

随着新一轮科技革命与产业变革的加速演进,拥有学科背景的应用型数据科学人才逐渐成为我国政产学研各界的人力资源需求重点。为响应需求,国家愈发重视新生力量数据思维与意识的培养,各高校也纷纷探索如何以新兴信息技术赋能传统主流学科。 在…

达索系统SOLIDWORKS流体分析网格划分失败,大多是这2种原因

SOLIDWORKS Flow Simulation 是直观的流体力学 (CFD) 分析软件,该软件功能强大、操作人性化,快速轻松的分析产品内部或外部流体的流动情况,以用来改善产品性能和功能。 当流体分析运行网格划分时,提示失败。 这是由于凸起面与圆…

【LeetCode刷题】--43.字符串相乘

43.字符串相乘 方法一:做加法,模拟竖式乘法的方法计算乘积 class Solution {public String multiply(String num1, String num2) {if(num1.equals("0") || num2.equals("0")){return "0";}String res "0";//nu…

Hadoop -hdfs的读写请求

1、HDFS写数据(宏观): 1、首先,客户端发送一个写数据的请求,通过rpc与NN建立连接,NN会做一些简单的校验,文件是否存在,是否有空间存储数据等。 2、NN就会将校验的结果发送给客户端…

解决requests库进行爬虫ip请求时遇到的错误的方法

目录 一、超时错误 二、连接错误 三、拒绝服务错误 四、内容编码错误 五、HTTP错误 在利用requests库进行网络爬虫的IP请求时,我们可能会遇到各种错误,如超时、连接错误、拒绝服务等等。这些错误通常是由目标网站的限制、网络问题或我们的爬虫代码中…

前端性能优化总结

这里写目录标题 页面性能测试工具测试指标 前端页面性能常见的问题前端页面性能优化常见策略及方案dns优化------预解析域名(异步进行)http请求优化减少请求次数同时多开持久连接 前面面试url从输入到确认搜索发生了什么js介绍new一个对象的过程&#xf…

Linux 进程等待

在2号手册里查wait()。wait()等待任意一个子进程的状态。 wait()等待成功会返回该子进程的id,返回失败会返回-1: 小实验 子进程的退出码 子进程执行work(),父进程wait子进程。 子进程跑完5秒之后就e…

GCANet_Gated context aggregation network for image dehazing and deraining

2019、中科大港科、有代码 Chen D, He M, Fan Q, et al. Gated context aggregation network for image dehazing and deraining[C]//2019 IEEE winter conference on applications of computer vision (WACV). IEEE, 2019: 1375-1383. GitHub - cddlyf/GCANet: Implementation…

丢掉破解版,官方免费了!!!

哈喽!大家好。 几天不见,今天给大家带来一款海外的神器,官方宣布完全免费,但仅限于个人与教育用途,切勿商用噢! 不要看这个软件名字普普通通,实际上内蕴乾坤! 接下来看我给大家炫一…

队列的实现和OJ练习(c语言)

目录 概念 队列的实现 利用结构体存放队列结构 为什么单链表不使用这种方法? 初始化队列 小提示: 队尾入队列 队头出队列 获取队头元素 获取队尾元素 获取队列中有效元素个数 检测队列是否为空 销毁队列 最终代码 循环队列 队列的OJ题 …

元素清空操作clear与选择操作check

元素清空操作clear与选择操作check clear() 作用 清空输入框的所有内容.clear() 等价于 .type("{selectall}{backspace}") 语法 .clear() .clear(options)option选项 元素选中操作check与uncheck check 语法 // 所有匹配到的选择框都会被选中一遍 .check()/…

三、防火墙-源NAT

学习防火墙之前,对路由交换应要有一定的认识 源NAT基本原理1.1.NAT No-PAT1.2.NAPT1.3.出接口地址方式(Easy IP)1.4.Smart NAT1.5.三元组 NAT1.6.多出口场景下的源NAT 总结延伸 ——————————————————————————————…

部署你的第一个应用

🗓️实验环境 OS名称Microsoft Windows 11 家庭中文版系统类型x64-based PCDocker版本Docker version 24.0.6, build ed223bcminikube版本v1.32.0 🤓FastAPI 构建应用 #基于fastapi快速创建一个项目 rkun1LAPTOP-TUS5FU0D MINGW64 / $ mkdir k8s-appr…

数学建模之拟合及其代码

发现新天地,欢迎访问Cr不是铬的个人网站 引言 与插值问题不同,在拟合问题中不需要曲线一定经过给定的点。拟合问题的目标是寻求一个函数(曲线),使得该曲线在某种准则下与所有的数据点最为接近,即曲线拟合…

基于跳蛛算法优化概率神经网络PNN的分类预测 - 附代码

基于跳蛛算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于跳蛛算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于跳蛛优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要:针对PNN神经网络的光滑…

数据结构学习笔记——多维数组、矩阵与广义表

目录 一、多维数组(一)数组的定义(二)二维数组(三)多维数组的存储(四)多维数组的下标的相关计算 二、矩阵(一)特殊矩阵和稀疏矩阵(二)…