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

2024-02-04 08:04

本文主要是介绍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逐级传递的繁琐过程。

这篇关于070:vue中provide、inject的使用方法(图文示例)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/676827

相关文章

使用Redis快速实现共享Session登录的详细步骤

《使用Redis快速实现共享Session登录的详细步骤》在Web开发中,Session通常用于存储用户的会话信息,允许用户在多个页面之间保持登录状态,Redis是一个开源的高性能键值数据库,广泛用于... 目录前言实现原理:步骤:使用Redis实现共享Session登录1. 引入Redis依赖2. 配置R

使用Python的requests库调用API接口的详细步骤

《使用Python的requests库调用API接口的详细步骤》使用Python的requests库调用API接口是开发中最常用的方式之一,它简化了HTTP请求的处理流程,以下是详细步骤和实战示例,涵... 目录一、准备工作:安装 requests 库二、基本调用流程(以 RESTful API 为例)1.

Python清空Word段落样式的三种方法

《Python清空Word段落样式的三种方法》:本文主要介绍如何用python-docx库清空Word段落样式,提供三种方法:设置为Normal样式、清除直接格式、创建新Normal样式,注意需重... 目录方法一:直接设置段落样式为"Normal"方法二:清除所有直接格式设置方法三:创建新的Normal样

在Linux系统上连接GitHub的方法步骤(适用2025年)

《在Linux系统上连接GitHub的方法步骤(适用2025年)》在2025年,使用Linux系统连接GitHub的推荐方式是通过SSH(SecureShell)协议进行身份验证,这种方式不仅安全,还... 目录步骤一:检查并安装 Git步骤二:生成 SSH 密钥步骤三:将 SSH 公钥添加到 github

把Python列表中的元素移动到开头的三种方法

《把Python列表中的元素移动到开头的三种方法》在Python编程中,我们经常需要对列表(list)进行操作,有时,我们希望将列表中的某个元素移动到最前面,使其成为第一项,本文给大家介绍了把Pyth... 目录一、查找删除插入法1. 找到元素的索引2. 移除元素3. 插入到列表开头二、使用列表切片(Lis

使用Python开发一个Ditto剪贴板数据导出工具

《使用Python开发一个Ditto剪贴板数据导出工具》在日常工作中,我们经常需要处理大量的剪贴板数据,下面将介绍如何使用Python的wxPython库开发一个图形化工具,实现从Ditto数据库中读... 目录前言运行结果项目需求分析技术选型核心功能实现1. Ditto数据库结构分析2. 数据库自动定位3

Python yield与yield from的简单使用方式

《Pythonyield与yieldfrom的简单使用方式》生成器通过yield定义,可在处理I/O时暂停执行并返回部分结果,待其他任务完成后继续,yieldfrom用于将一个生成器的值传递给另一... 目录python yield与yield from的使用代码结构总结Python yield与yield

Go语言使用select监听多个channel的示例详解

《Go语言使用select监听多个channel的示例详解》本文将聚焦Go并发中的一个强力工具,select,这篇文章将通过实际案例学习如何优雅地监听多个Channel,实现多任务处理、超时控制和非阻... 目录一、前言:为什么要使用select二、实战目标三、案例代码:监听两个任务结果和超时四、运行示例五

python使用Akshare与Streamlit实现股票估值分析教程(图文代码)

《python使用Akshare与Streamlit实现股票估值分析教程(图文代码)》入职测试中的一道题,要求:从Akshare下载某一个股票近十年的财务报表包括,资产负债表,利润表,现金流量表,保存... 目录一、前言二、核心知识点梳理1、Akshare数据获取2、Pandas数据处理3、Matplotl

Django开发时如何避免频繁发送短信验证码(python图文代码)

《Django开发时如何避免频繁发送短信验证码(python图文代码)》Django开发时,为防止频繁发送验证码,后端需用Redis限制请求频率,结合管道技术提升效率,通过生产者消费者模式解耦业务逻辑... 目录避免频繁发送 验证码1. www.chinasem.cn避免频繁发送 验证码逻辑分析2. 避免频繁