组件间通讯之 provide+inject 用法

已于 2022-03-10 10:43:24 修改
阅读量359 收藏
点赞数
分类专栏： 前端 JavaScript vue 文章标签： 前端 javascript vue.js
于 2022-03-10 10:42:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fttttttt/article/details/123391267
版权
JavaScript 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
vue
9 篇文章 0 订阅
订阅专栏
前端
3 篇文章 0 订阅
订阅专栏

这个可以父传子,父传孙,都可以,

第一张图:

provide 获取的的是父组件里面所有的属性

第二张图:

inject 获取 从 choose 传来的所有的属性, 并注入本页面

注意:provide并不是响应式的，当子组件inject的时候已经丢失了响应式功能

如果获取页面需要响应式的,如果不是必须要用到 这个组件通讯可以 Vuex/子传父$emit/父传子props

如果必须用到这个组件通讯的话

可以在父组件上 定义个回调函数

子组件用计算属性取值，watch监听

zhangt-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue父组件给子组件的组件传值provide inject的方法
10-16
Vue.js 的 `provide` 和 `inject` 是一种高级的数据传递机制，主要用于解决组件树中深层组件间通信的问题，特别是当不直接存在父子关系时。它们允许父组件提供一个值，而任何后代组件都可以通过 `inject` 来接收这个...
详解Vue 多级组件透传新方法provide/inject
08-27
下面将详细介绍provide/inject的使用方法和优点。 什么是provide/inject？ ---------------- provide/inject是Vue.js中一种特殊的数据传递方式，可以将数据从祖先组件传递到所有子孙后代组件。它可以取代传统的...
vue组件通信之‘provide+inject’的用法
是大林的林吖-博客
09-20 357
【代码】vue组件通信之‘provide+inject’的用法。
provide 和 inject 用法及原理
越是安静内敛的人，越容易生不惊人死不休
04-23 756
在父子组件传递数据时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。像这种情况，可以使用 provide 和 inject 解决这种问题，不论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据，父组件使用 provide 提供数据，子组件或孙组件 inject 注入数据。同时兄弟组件之间传值更方便。
vue顶层组件通过provide + inject + computed + watch 动态传值
左直拳的马桶_日用桶
08-06 3887
如果想从孙子辈组件直接获取到顶层组件的传值，而且是动态刷新的，需要通过provide + inject + computed + watch。 组件是vue开发框架的主角。日常开发过程中，为了利于复用、解耦，提升可读性和可维护性，不知不觉开发了一大堆组件。有时一张页面，其实由许多组件构成，并且这些组件，层层嵌套，层次可能很深。这时问题就来了，假如有一些参数，从顶层组件就开始设置或提供，然后最底层的组件又需要，层层传递，不仅繁琐、容易出错，反而不利于代码的可维护和可读。 有没有一种方法，可以直接由顶层组件传播
Vue 爷孙组件通讯之：Provide / Inject 详细介绍
A_one2010的博客
06-06 585
假设有一个组件A，A组件引入B组件（A为B的父组件） ，B组件引入C组件（B为C的父组件），即A为C的祖先组件，此时二者可以使用provide / inject进行通信。时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，层层传递非常麻烦。我们这里不让C直接改变A中的数据，而是将A改变数据的方法通过provide传给C，C执行该方法，触发改变A中的数据。以上为A向C传数据，如果C向A传数据（或者说C需要改变A中的数据），该如何做？
[vue3 + TS]祖组件和孙组件通讯provide+inject和注意点
wyy7293的博客
04-06 1871
祖组件和孙组件通讯 (依赖注入) 祖组件 //需求:需要孙组件及递组件调用方法`更新`祖组件的数据 const updateTodoItem = ({ index, isCompleted }: { index: number, isCompleted: boolean }) => { todosData.todos[index].isCompleted = isCompleted } /**提供 or 依赖*/ provide('update',updateTodoItem) /** (名
【vue3】provide + inject的使用
m0_53584457的博客
08-18 383
之前又说过props的方法，今天主要浅说下provide + inject；父组件下的很多个子组件中都使用了一个参数，或者父组件下面有很多的孙组件（子组件下面在使用子组件，在使用子组件）这种情况，如果使用props 的话会有很多个参数传递来传递去，很有可能会弄错，从而出现问题；provide 组合在父组件中注入一次，那么在该父组件下的所有子组件和孙组件都可能获取到这个注入的值。父组件中使用 provide；子组件中使用 inject。简单的一个父组件，一个子组件的使用props就会方便很多。...
vue3【祖孙传值】provide+inject
CSDNLFF的博客
06-04 782
一个小小案例，使用组合式API provide和inject实现祖孙传值，即祖组件可向下任意组件进行传值操作，适于初学初理解！！！ 注意【Attention】： 祖组件中记得按需引入provide，接收的组件按需引入inject Grandfather.vue <template> <divclass="container"> <h1>祖先组件：{{dataa}}</h1> <Fat...
Vue组件通讯方式 provide/inject 介绍以及使用场景
txfyteen的专栏
07-17 3821
文章目录vue的通讯方式provide / inject的缺点使用办法代码案例展示一（provide字符串）代码案例展示二（provide返回一个方法，并且方法返回字符串） vue的通讯方式 父子组件：父传子prop，子通知父 emit，【root，root，root，parent，$children】 非父子组件：Vuex实现，父子层层传递、中央事务总线Bus，$ref 子组件实例可以用 this.$parent 访问父实例，子实例被存储父组件实例的 $children 数组中。但是这种只是作为访问组件的
组件之间的传值——provide和inject
m0_59345890的博客
09-08 1186
在需要获取数据的组件内直接用inject注入到当前组件中，不管你处于那一层都能够获取到，inject属性的值为一个字符串数组，或一个对象，对象的情况可具体查看官方API。组件之间的多层传值我们前面学习过了通过$attrs和$listeners，今天我们来学习一个更为简单的方法利用组件对象的属性provide和inject,它们与data、methods这些属于同级。但是它有一个缺点就是数据不是响应式的，如我在爷爷组件方法内修改提供的值，但是子组件中获取的值不会改变。父亲组件：可以被注入提供的数据。
vue3和vue2 之 provide/inject 用法区别 ---vue3组件间通讯2
Realizee的博客
04-02 629
provide/inject 主要用于父组件和子孙组件间通讯，简单的父子组件间传值还是使用props、emits或是defineProps、defineEmits、defineExpose比较方便。父组件中提供数据，并在其后代的组件树，无论层级有多深，都可以中注入这些数据，从而实现了组件之间的数据传递。​​不用在父传子，子传孙，孙传重孙等数据传递了（解决了Prop 逐级透传问题）
13.（vue3.x+vite）组件间通信方式之provide与inject.rar
09-19
本教程将详细讲解Vue3.x中使用`provide`和`inject`进行组件间通信的方法。这两个API允许父组件向其所有子孙组件传递数据，而无需通过props逐层传递。 首先，`provide`是父组件定义可以提供给子孙组件的数据或方法的...
八种Vue组件间通讯方式合集(推荐)
10-14
6、**Provide/Inject**：父组件使用`provide`提供变量，孙组件或子组件使用`inject`注入这些变量。这种方式允许非父子关系的组件间通讯，但应谨慎使用，以防止滥用导致的复杂性增加。 7、**Ref和v-model**：`ref`...
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1057
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
WHAT - NextJS 的路由系统和 react-router-dom
最新发布
weixin_58540586的博客
07-04 841
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
在 .NET 8 Web API 中实现弹性
技术探索驿站
07-03 596
通过执行这些步骤，您已使用 Microsoft.Extensions.Http.Resilience 库将弹性集成到 .NET 8 Web API 项目中。重试策略、断路器设置和超时将有助于确保您的 API 能够抵御瞬时故障，从而提高其可靠性和用户体验。
Vue前端打包
weixin_63680330的博客
07-04 236
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
vue组件通信provide/inject
10-10
Vue组件通信的provide和inject是一种高级的父子组件通信方式。通过provide选项，父组件可以提供数据给所有的子孙组件，然后子孙组件可以通过inject选项来注入这些数据。 具体使用方法如下： 在父组件中，使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值