vue组件多层级传值(爷爷组件和孙子组件直接传值)+provide + inject

已于 2022-03-01 16:06:12 修改
阅读量856 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2022-03-01 13:51:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bigdargon/article/details/123203991
版权
本文介绍了在Vue中如何使用provide和inject进行多层级组件间的通信，尤其是从爷爷组件直接传值到孙子组件。这种方法避免了繁琐的props传递，但需要注意的是，当顶层参数改变时，底层组件无法自动感知，需要配合computed和watch来监听并更新值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

有时一个页面，其实由许多组件构成，并且这些组件，层层嵌套，层次可能很深。这时问题就来了，假如有一些参数，从顶层组件就开始设置或提供，然后最底层的组件又需要，层层传递，不仅繁琐、容易出错，反而不利于代码的可维护和可读。

有没有一种方法，可以直接由顶层组件传播到最底层呢？或者说，可以让最底层能直接接收到顶层的参数呢？

有的，provide + inject
。顶层组件provide，底层组件inject。但是，这只能保证一次成功，以后参数改变了，底层并不能感知。这时又要加上computed和watch，并且参数是函数类型，各种方法一齐上，才能奏效。

父组件：

export default {
   
  provide () {
   
    return
最低0.47元/天 解锁文章
vue3 多层级组件传值
红烧咸咸鱼
02-23 1140
vue3 多层级组件传值
Vue组件通信06-多层级组件通信（爷爷到孙子-传值）-provide&inject
caoxinjian423的博客
10-08 1235
components/Parent.vue <template> <div> 我是父组件 <Son></Son> </div> </template> <script> /* provide：Object | () => Object inject：Array<string> | { [key: string]: string | Symbol | Ob
vue父组件给子组件的组件传值provide inject的方法
10-16
在本篇文章里小编给大家整理的是一篇关于vue父组件给子组件的组件传值provide inject的方法，需要的朋友们学习下。
vue顶层组件通过provide + inject + computed + watch 动态传值
左直拳的马桶_日用桶
08-06 4906
如果想从孙子辈组件直接获取到顶层组件的传值，而且是动态刷新的，需要通过provide + inject + computed + watch。 组件是vue开发框架的主角。日常开发过程中，为了利于复用、解耦，提升可读性和可维护性，不知不觉开发了一大堆组件。有时一张页面，其实由许多组件构成，并且这些组件，层层嵌套，层次可能很深。这时问题就来了，假如有一些参数，从顶层组件就开始设置或提供，然后最底层的组件又需要，层层传递，不仅繁琐、容易出错，反而不利于代码的可维护和可读。 有没有一种方法，可以直接由顶层组件传播
vue3父子组件传值
最新发布
qziovv的博客
03-21 496
父传子：使用。子传父：使用和emit。双向绑定：使用v-model和。跨层级传值：使用provide和inject。提供了更灵活和强大的方式来组织组件逻辑，特别是在复杂场景下。如果还有其他问题或需要更详细的示例，请随时补充说明！
Vue Provide / Inject 传递动态数据
qq_43345846的博客
05-19 2631
Vue2.X写法 父组件 export default { provide() { return { // 如果是静态的，可以不返回方法 // test: this.test test: ()=> this.test } }, data() { return { test: 1 } }, created() { setTimeout(() => { this.test = 2 },2000) } } ..
provide+inject （自学vue3——2）
weixin_43252365的博客
09-15 67
响应式提供，变量改变时注入的地方会发生响应式变化。此为普通提供，子组件不会发生响应式变化。使用computed计算属性。
Vue组件通信：依赖注入(provide + inject)
weixin_52268321的博客
12-13 519
Vue3文档：https://cn.vuejs.org/guide/components/provide-inject.html。
Vue组件跨层级获取组件操作
10-15
在Vue.js框架中，组件之间的通信通常是通过props和事件来完成的。然而，在一些复杂的应用场景中，可能需要跨层级组件进行通信。本文主要探讨Vue组件跨层级获取组件操作的技术点。 ### 1. Vue组件层级关系访问 Vue...
Vue中provide，inject用法
weixin_45706529的博客
11-16 219
在负组件中写入provide provide() { return { "另起名字":父组件方法 } }, provide() { return { "getParentBannerList": this.getBannerList } }, 子组件中： inject: ["父组件中另起名字"], inject: ["getParentBannerList"], 这样子组件就可以使用父组件的方法，以及子组件的子组件...
浅谈provide与inject
tion1992的博客
04-22 6194
provide与injec是vue提供的组件传值的方式之一，作用在与可以给后代组件传值，而props是只能给子组件传值具体的用法看代码 a组件: <template> <div> a组件 <b /> </div> </template> <script> import b from './b' export default { provide() { return { msg: this.
vue中provide和inject的用法
weixin_44867717的博客
03-28 1209
provide 和 inject 主要在开发高阶插件/组件库时使用。3个组件 A(父级)、B(子级)、C(孙子级)3个组件 A(父级)、B(子级)、C(孙子级)通过provide与inject，
祖孙组件传值通过（provide+inject）
weixin_48912846的博客
04-12 354
父级： provide:function () { return { job:this.job } }, <div>职业：{{job.type}}</div> 子级： //注入父组件设置的依赖数据 inject:['job'], <button @click="job.type='java开发工程师'">修改</button> 孙级组件： //注入父组件设置的依赖数据 inject:['job']
动态组件、Provide / Inject、异步组件
weixin_44211097的博客
10-27 657
一、动态组件 有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里： 父组件： <!-- 动态组件 --> <button @click="getComp('DynaA')">A</button> <button @click="getComp('DynaB')">b</button> <button @click="getComp('DynaC')">C<.
vue组件通信之‘provide+inject’的用法
是大林的林吖-博客
09-20 415
【代码】vue组件通信之‘provide+inject’的用法。
【vue3】provide + inject的使用
m0_53584457的博客
08-18 450
之前又说过props的方法，今天主要浅说下provide + inject；父组件下的很多个子组件中都使用了一个参数，或者父组件下面有很多的孙组件（子组件下面在使用子组件，在使用子组件）这种情况，如果使用props 的话会有很多个参数传递来传递去，很有可能会弄错，从而出现问题；provide 组合在父组件中注入一次，那么在该父组件下的所有子组件和孙组件都可能获取到这个注入的值。父组件中使用 provide；子组件中使用 inject。简单的一个父组件，一个子组件的使用props就会方便很多。...
provide与inject实用技巧
happy任的博客
03-18 2970
一、前言 1、简介：provide与inject是Vue组件开发当中较为实用的功能。 2、用途：主要用于vue高阶组件的开发，本文将介绍一些provide与inject的一些实用技巧。 3、原理： provide用于向子组件(或子组件中的子组件，无限嵌套)提供自身的一些数据，或者将自身所有属性全部提供，但是提供的数据均为非响应式数据。 ...
vue 3 学习笔记 (八)——provide 和 inject 用法及原理
前端人的博客
11-26 4592
在父子组件传递数据时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。 像这种情况，可以使用 provide 和 inject 解决这种问题，不论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据，父组件使用 provide 提供数据，子组件或孙组件 inject 注入数据。同时兄弟组件之间传值更方便。 一、Vue2 的 provide / inject
vue--8.组件传值(provide--inject)、动态组件、缓存组件keep-alive、异步组件
m0_63774574的博客
09-08 635
vue--8.组件传值(provide--inject)、动态组件、缓存组件keep-alive、异步组件
vue孙子组件向爷爷组件传值 组合式api
01-04
在 Vue 的组合式 API 中，`provide` 和 `inject` 是一种强大的工具，允许跨层级组件之间进行通信。这使得子孙组件可以直接与祖父级组件交互而无需通过中间的父组件。 #### 使用 provide 和 inject 进行跨层级通信 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值