vue.js子辈组件访问父辈组件，利用provide/inject动态传参数，实现响应式数据绑定

最新推荐文章于 2024-05-14 16:35:11 发布
最新推荐文章于 2024-05-14 16:35:11 发布
阅读量1.5k 收藏 2
点赞数 1
分类专栏： Vuejs 前端 js 文章标签： vue javascript vue.js 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42917830/article/details/107774872
版权

引入

在vue前端的开发中，难免会遇到子辈组件跨层级访问（祖）父辈组件属性、函数的情况，通常来说，在子父中，我们大多会使用$parent实现，但在跨越层级过多时，就需要provide/inject来实现了。

如果你会搜索到这篇文章，你应该已经发现了：官方的provide/inject组合并不能实现响应式的动态数据绑定，于是官方会推荐你使用vuex（狗头⚠️）

该特性的缺位，使得

父辈组件是ajax异步获取数据，再将数据通过provide传递给子辈组件

的场景下，子辈组件不能顺利拿到异步获取到的数据（因为子辈拿的是初始provide的数据，且数据非响应式，不会动态刷新），

我需要简约、到位的解决。
不想学vuex

解决方案

父辈组件

根据官方文档的阐述：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。我受到了启发

我们可以这样，在父辈上层组件的provide块中，实现一个提供动态值

最低0.47元/天 解锁文章
俊隽X
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue.js中provide/inject实现响应式数据更新的方法示例
10-16
为了解决这个问题，我们可以利用Vue.js的特性来实现响应式数据更新。一种可行的方法是通过提供一个返回父组件动态数据的函数，而不是直接提供数据。这样，每次子组件调用这个函数时，都会获取到父组件当前的数据值。...
Bootstrap 按钮（实例 ）
2401_84093443的博客
05-04 629
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Vue Provide / Inject 传递动态数据
qq_43345846的博客
05-19 2184
Vue2.X写法 父组件 export default { provide() { return { // 如果是静态的，可以不返回方法 // test: this.test test: ()=> this.test } }, data() { return { test: 1 } }, created() { setTimeout(() => { this.test = 2 },2000) } } ..
Vue中provide inject详解+数据响应式更新
最新发布
2401_84097427的博客
05-14 449
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
动态组件、Provide / Inject、异步组件
weixin_44211097的博客
10-27 571
一、动态组件 有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里： 父组件： <!-- 动态组件 --> <button @click="getComp('DynaA')">A</button> <button @click="getComp('DynaB')">b</button> <button @click="getComp('DynaC')">C<.
vue3 父子组件传参provide inject ，响应式监听provide参数
潜心
03-16 5008
最近在学习vue3，联系中出现了一个场景，需要子父组件传参，根据需求我需要使用provide 和inject 这俩个函数，因为我的子父组件的层级是复杂的。开始想到了事件总线bus,然而— 官方文档写的很清楚： 所以我选择provide. 那么provide在传参的时候用inject来接收。很多的帖子已经有写，在vue3里面是函数式编程，这俩兄弟也成了函数式。 看下例子： 第一个参数是属性名，第二个是属性值，那问题来了，我想同时传入多个对象该怎么做，我通过查阅文章发现，大家的解决办法是再写一个provid
provide/inject的使用 跨组件传值
Smile的博客
11-25 817
provide / inject 需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。实现跨组件传值 provide 选项应该是：一个对象或返回一个对象的函数 inject 选项应该是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名 provide() { return { title: '父组件' ...
vue子组件修改父组件中的属性
元宝的博客
03-21 2241
需求： 有时候我们在父组件中引入子组件，并且想通过子组件事件动态改变父组件中的值，这时我们可以通过provide和inject组合来实现 //在父页面定义一个方法，并设置形参，然后通过 provide 将其暴露出去。 export default { provide(){ return{ updateFunc:this.updateFunc } }, data() { return { newContent:''
Vue provide 和 inject 深层父子组件通信
海胆的博客
07-30 170
父组件通过 provide选项提供数据 子组件通过 inject选项 注入数据 可以跨越层级传递 注：provide选项 要访问组件实例data，需要将 provide 转换为返回对象的函数 默认情况下，provide/inject 绑定并不是响应式的。 ...
provide,inject跨组件传值 以及修复provide值改变而inject值未变问题
HQ\(^o^)/的博客
10-07 505
今天在写代码时,发现一样的请求、一样的代码有些重复，代码冗余，便想着怎么减少代码量，我就先看它们发送请求、重复的代码文件，结果发现，它们的根文件都是相同的，那便想到了跨组件传值，脑海第一时间想到的就是 provide 和inject毕竟 只需要在祖先的文件下使用 provide，后面的哪个后代后代的文件需要这个值的话，就可以直接使用inject接收就行了。
vue.js自定义组件实现v-model双向数据绑定的示例代码
01-19
我们都清楚v-model其实就是vue的一个语法糖，用于在表单控件或者组件上创建双向绑定。 //表单控件上使用v-model <input type=text v-model=name /> <input type=checkbox v-model=checked/> <!-...
详解Vue 多级组件透传新方法provide/inject
08-27
Vue.js 中的provide/inject方法是2.2版本中新增的功能，可以实现多级组件之间的数据传递。下面将详细介绍provide/inject的使用方法和优点。 什么是provide/inject？ ---------------- provide/inject是Vue.js中一...
vue父组件给子组件的组件传值provide inject的方法
10-16
Vue.js 的 `provide` 和 `inject` 是一种高级的数据传递机制，主要用于解决组件树中深层组件间通信的问题，特别是当不直接存在父子关系时。它们允许父组件提供一个值，而任何后代组件都可以通过 `inject` 来接收这个...
11、组件传值：provide && inject
sunluyi的博客
03-16 903
现在有3个页面，分别是home.vue、HelloWorldA.vue、HelloWorldB.vue 其中A是home的子组件，B是A的子组件 home.vue <template> <div class="home"> <h1>HOME</h1> <HelloWorldA></HelloWorldA> </div> </template> <script> import Hell
vue--8.组件传值(provide--inject)、动态组件、缓存组件keep-alive、异步组件
m0_63774574的博客
09-08 539
vue--8.组件传值(provide--inject)、动态组件、缓存组件keep-alive、异步组件
vue顶层组件通过provide + inject + computed + watch 动态传值
左直拳的马桶_日用桶
08-06 3837
如果想从孙子辈组件直接获取到顶层组件的传值，而且是动态刷新的，需要通过provide + inject + computed + watch。 组件是vue开发框架的主角。日常开发过程中，为了利于复用、解耦，提升可读性和可维护性，不知不觉开发了一大堆组件。有时一张页面，其实由许多组件构成，并且这些组件，层层嵌套，层次可能很深。这时问题就来了，假如有一些参数，从顶层组件就开始设置或提供，然后最底层的组件又需要，层层传递，不仅繁琐、容易出错，反而不利于代码的可维护和可读。 有没有一种方法，可以直接由顶层组件传播
vue js中使用provide与inject传值
sssssnmmm的博客
07-15 630
正常情况下，我们传数据都是在父子组件中通过props的方式进行父子组件间的传值，这种方式传数据不能跨"辈"，如果想要从祖组件传数据到子组件需要一层层的传递，这样会显得很麻烦。上面的实例通过provide（）提供了一个值，这样后代组件就能通过inject来接收这个由祖父组件传递过去的值。时,使用默认值,它也可以是一个函数,用来返回某些创建起来比较复杂的值,如果默认值本身就是一个函数。provide与inject解决的是祖孙组件中传值的问题：把祖组件的数据直接传递到子组件。接收两个参数,第一个参数是要注入的。
Provide/Inject 依赖注入(未完待续)
Supernova
01-10 524
可以通过Provide从Root传递给DeepChild。根节点向子节点传递参数。
Vue 中provide/inject实现响应式数据更新（组件子孙传值）
06-03
在Vue中，provide和inject是一对用于在父组件和子组件之间传递数据的API。但是，当我们在provide中提供响应式数据时，它并不会自动触发子组件的更新。 为了实现响应式数据更新，我们可以使用Vue中的$forceUpdate()方法。具体来说，我们可以在provide中提供一个包含响应式数据的对象，并在子组件中使用inject将其注入。然后，在父组件中更新数据时，我们可以在更新数据后手动调用$forceUpdate()方法强制更新子组件。 以下是一个示例代码： 父组件： ``` <template> <div> <ChildComponent /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { provide() { return { data: this.data } }, data() { return { data: {} } }, methods: { updateData() { this.data.name = 'new name'; this.$forceUpdate(); } }, components: { ChildComponent } } </script> ``` 子组件： ``` <template> <div> {{data.name}} </div> </template> <script> export default { inject: ['data'], created() { console.log(this.data.name); // 输出空字符串 }, mounted() { console.log(this.data.name); // 输出空字符串 }, updated() { console.log(this.data.name); // 输出'new name' } } </script> ``` 在这个例子中，父组件提供了一个包含响应式数据的data对象，并将其注入到子组件中。在父组件中更新数据时，我们手动调用了$forceUpdate()方法，从而强制更新了子组件的视图。在子组件中，我们可以通过inject注入父组件提供的data对象，并在updated钩子函数中获取更新后的数据。 需要注意的是，$forceUpdate()方法会触发所有子组件的更新，因此使用时需要谨慎。如果可能的话，我们应该尽量避免使用这个方法，而是通过Vuex或事件总线等其他方式来进行组件间的通信。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值