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

已于 2022-03-01 16:06:12 修改
阅读量762 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2022-03-01 13:51:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bigdargon/article/details/123203991
版权

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

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

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

父组件：

export default {
   
  provide () {
   
    return
最低0.47元/天 解锁文章
bigdargon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue祖孙组件怎么传值
2401_84446580的博客
04-29 366
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分内容。
动态组件、Provide / Inject、异步组件
weixin_44211097的博客
10-27 570
一、动态组件 有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里： 父组件： <!-- 动态组件 --> <button @click="getComp('DynaA')">A</button> <button @click="getComp('DynaB')">b</button> <button @click="getComp('DynaC')">C<.
vue顶层组件通过provide + inject + computed + watch 动态传值
左直拳的马桶_日用桶
08-06 3771
如果想从孙子辈组件直接获取到顶层组件的传值，而且是动态刷新的，需要通过provide + inject + computed + watch。 组件是vue开发框架的主角。日常开发过程中，为了利于复用、解耦，提升可读性和可维护性，不知不觉开发了一大堆组件。有时一张页面，其实由许多组件构成，并且这些组件，层层嵌套，层次可能很深。这时问题就来了，假如有一些参数，从顶层组件就开始设置或提供，然后最底层的组件又需要，层层传递，不仅繁琐、容易出错，反而不利于代码的可维护和可读。 有没有一种方法，可以直接由顶层组件传播
Vue3组件通信全解析：利用props、emit、provide/inject跨层级传递数据，expose与ref实现父子组件方法调用
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-18 5816
template>--子组件eventsSetup.vue 定义事件演示-->//定义一个点击完成事件 done 和 sent 两个事件//TS模式 定义emits/*}>();*///触发done事件，请把用户输入的值msg传出去//也可以不传参数.itxst{
Vue Provide / Inject 传递动态数据
qq_43345846的博客
05-19 2171
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--使用/教程/实例
IT利刃出鞘的博客
01-08 1796
​说明 本文用示例介绍Vue中的provide和inject的用法。 官网 Provide / Inject | Vue.js API — Vue.js provide和inject的简介 说明 通过provide与inject，可以把父组件的数据和方法传递给其所有子孙后代。 这种传递是可以跨级的。比如：父组件可以把数据传递给孙组件。 父组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。
Vue之依赖注入——provide/inject的使用
六耳石猴的博客
01-22 533
常规使用 静态数据，非响应式 父组件 provide: { name: 'zs', age: 65, gender: '男' } 子组件 inject: ['name', 'age', 'gender'], created () { console.log(this.name) // => "zs" } 响应式数据 数据变化从上往下流动 注意： 注入数据为对象才能实现，当为Number,String，Boolean等基本类型时变化无法向下流动
vue父组件给子组件的组件传值provide inject的方法
10-16
在本篇文章里小编给大家整理的是一篇关于vue父组件给子组件的组件传值provide inject的方法，需要的朋友们学习下。
vue组件间的传值-小案例
07-06
写了几个小demo，简单描述了vue中父组件传值子组件、子组件传值父组件、父组件调用子组件的方法或变量。
vue3父子组件传值.doc
02-05
vue3父子组件传值
Vue组件创建和传值的方法
10-18
给大家介绍了vue组件创建和传值的方法，创建组件有三种方法，文中给大家介绍的非常详细，父组件传值给子组件的方法，给大家介绍的也非常详细，需要的朋友参考下吧
Provide 和 Inject 的用法
热门推荐
weixin_41897680的博客
11-23 2万+
前言 父子组件传参可以通过props和emit来实现，但是当组件的层次结构比较深时，props和emit就没什么作用了。vue为了解决这个提出了Provide / Inject，知道这个东西，但是一直没用过，最近碰到了一个问题，踩了一些坑，在这里记录一下 备注： 我安装的是vue3.x，v-model用的是3.x的语法。 2.x和3.x用法一致，我这里是用2.x写的 通用知识 基本用法 provide 选项应该是：一个对象或返回一个对象的函数 inject 选项应该是：一个字符串数组，或 一个对象，对象的
vue监听赋值值以及provide与inject
weixin_41143662的博客
11-20 7880
在子组件增加watch监听 watch: { 'oState': function (val) { this.getOrderList({orderStatus: this.getOrderState(this.oState), pageSize: 1}) } },
vue中provide/inject的使用及组件传值
xiasohuai的博客
08-08 8046
inject 选项应该是： 一个字符串数组，或 一个对象，对象的 key 是本地的绑定名，value 是： 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或 一个对象，该对象的： from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol) default 属性是降级情况下使用的 value provider/inject：简单的来说就是在父组件中通过pr...
vue 中provide inject的响应式监听解决办法 简单
前端一线搬运工的博客
01-11 8213
提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 所以传值传对象即可 provide(){ return { provObj: { uuidList:{} } } }, this._provided.provObj.uuidList = r...
provide/inject的使用 跨组件传值
Smile的博客
11-25 815
provide / inject 需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。实现跨组件传值 provide 选项应该是：一个对象或返回一个对象的函数 inject 选项应该是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名 provide() { return { title: '父组件' ...
vue里父向子传值的另种方法provide/inject
old_hu的备忘录
11-15 310
传变量 //父组件: provide: { name: '张三' }, //------------------------------------------------------------------ //子组件 inject: ['name'], //用法: this.name 还能传递方法: //父组件 data() { return { na...
vue中的provide和inject
易之晓的博客
11-02 322
provide：Object | () => Object inject：Array | { [key: string]: string | Symbol | Object } provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本 新增的。 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有...
vue3 多层组件的传值与监听
01-23
在Vue 3中，多层组件之间的值传递和监听可以通过以下几种方式实现： 1. props和emit：在父组件中使用props将数据传递给子组件，在子组件中使用$emit触发一个自定义事件，再在父组件中使用v-on监听该事件并处理。这样就可以实现父子组件之间的双向数据传递和监听。 2. provide和inject：在父组件中使用provide提供数据，然后在子组件中使用inject来注入该数据。这种方式可以实现跨层级的组件之间的数据传递，而不需要一层层地传递props。 3. ref和reactive：通过ref和reactive可以创建响应式的数据，然后将这些数据传递给多层组件中。父组件可以将数据通过props传递给子组件，子组件可以直接修改这些数据，然后父组件会自动响应数据的改变。 4. $attrs和$listeners：这两个新的特性可以简化多层组件之间的传值和监听。$attrs可以让子组件接收父组件中没有被props捕获的属性，$listeners可以将父组件中的事件监听自动绑定到子组件上。 总的来说，Vue 3提供了多种方式来实现多层组件之间的传值和监听，开发者可以根据具体场景选择合适的方式，灵活运用这些特性来提高开发效率和代码可维护性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值