070:vue中provide、inject的使用方法(图文示例)

在这里插入图片描述

第070个

查看专栏目录: VUE


本文章目录

    • 示例背景
    • 示例效果图
    • 示例源代码
      • 父组件代码
      • 子组件代码
      • 孙组件代码
    • 基本使用步骤

示例背景

本教程是介绍如何在vue中使用provide和inject。在 Vue 中,provide 和 inject 是用于实现祖先组件向后代组件传递数据的一种方式。 在这个示例中,祖组件通过 provide 提供了 message 变量 和message2 变量 ,子组件通过 inject 注入了 message 变量,孙组件通过 inject 注入了 message2 变量。这样,子组件和孙就可以访问到父组件提供的数据。

示例效果图

在这里插入图片描述

示例源代码

父组件代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-02-04
*/<template><div class="djs-box"><div class="topBox"><h3>vue中provide/inject怎么使用(图文示例)</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div></div><div class="dajianshi"><ComA></ComA></div></div>
</template><script>import ComA from '../components/provideInject/demo-A.vue';export default {components:{ComA},provide() {return {message: 'Hello from ROOT-message',message2: 'Hello from ROOT-message2'};}}
</script>
<style scoped>.djs-box {width: 1000px;height: 650px;margin: 50px auto;border: 1px solid teal;}.topBox {margin: 0 auto 0px;padding: 10px 0 20px;background: teal;color: #fff;}.dajianshi {width: 98%;height: 480px;margin: 5px auto 0;display: flex;justify-content: space-between;border:1px solid #369;}</style>

子组件代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-02-04
*/<template><div style="margin-top: 100px;"><div class="left"><h2>儿子组件从跟组件获取的信息message:</h2><div style="color: blue;">{{message}}</div></div><div class="right"><h2>孙子组件从跟组件获取的内容message2:</h2><ChildA></ChildA></div></div>
</template><script>import ChildA from '@/components/provideInject/demo-A-A.vue';export default {inject: ['message'],components:{ChildA},}
</script>
<style scoped>.left{ width: 48%; float:left;}.right{ width: 48%; float:right; height:300px; border:1px solid #ddd;}
</style>

孙组件代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-02-04
*/<template><div><div style="color: red;">{{ message2 }}</div></div>
</template><script>export default {inject: ['message2'],}
</script>

基本使用步骤

Vue中的provide和inject是用于实现依赖注入的API,其基本使用步骤如下:

  • 在父组件中使用provide:在父组件(祖先组件)的provide选项中,指定想要提供给后代组件的数据或方法。这些数据或方法可以是任意类型,包括函数、对象、原始值等。
  • 在子组件中使用inject:在任何后代组件中,通过inject选项来接收父组件提供的数据或方法。inject可以是一个字符串数组,也可以是一个对象。如果是对象,可以指定键名与默认值。
  • 传递非响应式数据:需要注意的是,通过provide/inject传递的数据不会自动变成响应式的。如果需要在子组件中监听这些数据的变化,可能需要结合Vue的响应式系统进行处理。
  • 解决逐级传递问题:provide/inject特别适用于解决跨多个层级的组件间数据传递问题,避免了通过props逐级传递的繁琐过程。

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

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

相关文章

oracle 触发器事前触发和事后触发区别

Oracle触发器的事前触发和事后触发主要在触发的时机和触发器内部的操作上有所区别。 触发时机&#xff1a;事前触发器是在触发事件发生之前运行&#xff0c;而事后触发器则在触发事件发生之后运行。 获取的数据&#xff1a;事前触发器通常可以获取到事件发生前和新的字段值。O…

Docker存储空间清理

不知不觉服务器存储空间被Docker掏空了… 查看Docker空间占用情况 使用docker system df命令&#xff0c;可以加 -v 查看详情 清理Docker不需要的内容 使用docker system prune -a命令清理Docker 所有停止的容器所有没有被使用的networks所有没容器的镜像所有build cache …

公共用例库计划--个人版(六)典型Bug页面设计与开发

1、任务概述 本次计划的核心任务是开发一个&#xff0c;个人版的公共用例库&#xff0c;旨在将各系统和各类测试场景下的通用、基础以及关键功能的测试用例进行系统性地归纳整理&#xff0c;并以提高用例的复用率为目标&#xff0c;力求最大限度地减少重复劳动&#xff0c;提升…

图论练习4

内容&#xff1a;染色划分&#xff0c;带权并查集&#xff0c;扩展并查集 Arpa’s overnight party and Mehrdad’s silent entering 题目链接 题目大意 个点围成一圈&#xff0c;分为对&#xff0c;对内两点不同染色同时&#xff0c;相邻3个点之间必须有两个点不同染色问构…

Elasticsearch:入门

1. 介绍Elasticsearch 1.1 什么是Elasticsearch Elasticsearch是一款基于开源的分布式搜索和分析引擎&#xff0c;构建在Apache Lucene之上。它旨在提供一个强大且灵活的工具&#xff0c;使用户能够以高效、实时的方式存储、检索和分析大量数据。 1.2 Elasticsearch的主要特…

自动化测试报告生成【Allure】

之前尝试使用过testNG自带的测试报告、优化过reportNG的测试报告&#xff0c;对这两个报告都不能满意。后经查找资料&#xff0c;发现有个神器&#xff1a; Allure&#xff08;已经有allure2了&#xff0c;笔者使用的就是allure2&#xff09;&#xff0c;生成的测试报告与上述…

异或加密原理及简单应用(C语言版)

加密原理&#xff1a; 异或加密是一种基于异或运算的简单加密算法。在二进制运算中&#xff0c;异或&#xff08;XOR&#xff09;的规则是&#xff1a; 0 XOR 0 00 XOR 1 11 XOR 0 11 XOR 1 0 这意味着如果两个比特相同&#xff0c;则结果为0&#xff0c;否则结果为1。异…

八. 实战:CUDA-BEVFusion部署分析-学习spconv的优化方案(Implicit GEMM conv)

目录 前言0. 简述1. 什么是Implicit GEMM Conv2. Explicit GEMM Conv3. Implicit GEMM Conv4. Implicit GEMM Conv优化5. spconv和Implicit GEMM Conv总结下载链接参考 前言 自动驾驶之心推出的 《CUDA与TensorRT部署实战课程》&#xff0c;链接。记录下个人学习笔记&#xff0…

Python 中的 __doc__ 属性是用来做什么的?Python 中的 logging 模块是用来做什么的?如何配置日志记录?

Python 中的 doc 属性是用来做什么的&#xff1f; doc 是 Python 中用于存储文档字符串&#xff08;docstring&#xff09;的特殊属性。文档字符串是与模块、类、函数或方法相关联的字符串&#xff0c;用于提供对其功能和使用的简要描述。 主要用途&#xff1a; 文档和注释&a…

WiFi 6 和WiFi 6e 的核心要点

目录 WiFi 6 是什么&#xff1f; WiFi 6/6e 的主要feature功能&#xff1a; 80Mhz and 160Mhz channel 1K QAM WiFi6 支持2.4G band OFDMA&#xff1a;Orthogonal frequency division multiple access OFDMA先把频段分为&#xff1a;Resource Units (RUs) Subcarriers …

使用 Visual Studio Code 在远程计算机上调试 PostgreSQL

使用 Visual Studio Code 在远程计算机上调试 PostgreSQL 1. 概述 PostgreSQL 是一个功能强大的开源关系数据库管理系统&#xff0c;适用于各种应用程序。在开发过程中&#xff0c;调试 PostgreSQL 对于识别和解决问题至关重要。在本博客中&#xff0c;我们将手把手教你使用客…

创建自己的Hexo博客

目录 一、Github新建仓库二、支持环境安装Git安装Node.js安装Hexo安装 三、博客本地运行本地hexo文件初始化本地启动Hexo服务 四、博客与Github绑定建立SSH密钥&#xff0c;并将公钥配置到github配置Hexo与Github的联系检查github链接访问hexo生成的博客 一、Github新建仓库 登…

Windows SDK(四)鼠标和键盘消息处理

鼠标基础知识 鼠标一般分为三种状态&#xff0c;三个按钮 三种状态&#xff1a;单击&#xff0c;双击&#xff0c;拖动 三个按钮&#xff1a;左键&#xff08;LBUTTON&#xff09;&#xff0c;右键&#xff08;RBUTTON&#xff09;&#xff0c;中键&#xff08;MBUTTON&…

【计算机视觉】目标检测 |滑动窗口算法、YOLO、RCNN系列算法

一、概述 首先通过前面对计算机视觉领域中的卷积神经网络进行了解和学习&#xff0c;我们知道&#xff0c;可以通过卷积神经网络对图像进行分类。 如果还想继续深入&#xff0c;会涉及到目标定位(object location)的问题。在图像分类的基础上(Image classification)的基础上…

JAVA中的多态参数

1.方法定义的参数类型为父类类型&#xff0c;实参类型允许为子类类型 public class Ploy_parameter {public static void main(String[] args) {Manage jack new Manage("jack",12000,3000);Staff tom new Staff("tom",10000);Ploy_parameter ploy_para…

【Linux系统化学习】进程等待

目录 进程等待 进程等待的必要性 进程等待的方法 wait方法 等待一个进程(阻塞等待&#xff09; waitpid方法 任意等待多个进程&#xff08;阻塞等待&#xff09; 父进程获取子进程的退出信息 非阻塞轮询等待 进程等待 进程等待的必要性 之前讲过&#xff0c;子进程退…

javascript设计模式之建造者

工厂模式不关心过程&#xff0c;只关心结果&#xff0c;这与建造者相反&#xff0c;建造者更关心的是过程&#xff0c; 这里我们创建一个基类&#xff0c;其拥有技能跟爱好两个属性&#xff0c;还有两个实例方法用来获取技能跟爱好 // 基类 let Human function (param {}) …

【深入浅出Java性能调优】「底层技术原理体系」详细分析探索Java服务器性能监控Metrics框架的实现原理分析(Dropwizard度量基础案例指南)

深入探索Java服务器性能监控Metrics框架的实现原理分析 前提介绍Dropwizard MetricsDropwizard的特点Dropwizard的开发案例需要引入Maven依赖常用度量类型Meter(每秒请求数为单位测量请求率)定义度量核心MetricRegistry构建对应的Meter指标对象请求标记采样业务方法控制报告器…

chisel 语法

// TODO: find out the new way to have a reset signal class KnightRider(resetSignal: Bool null, frequ: Int)//extends Module(_reset resetSignal) {extends Module {val io IO(new Bundle {val led Output(Bits(6.W))})//定义了一个枚举类型&#xff0c;包含两个状态…

使用Python将Excel数据导入Word并设置字体样式(成功)

在日常办公和数据处理中&#xff0c;我们经常需要将Excel中的数据导入到Word文档中。手动完成这个过程可能既费时又容易出错。本文将介绍如何使用Python自动化这一任务&#xff0c;同时根据数据的不同设置不同的字体样式和大小。 所需工具 Python&#xff1a;一种广泛使用的高…