provide和inject的父子传参使用

最新推荐文章于 2023-05-23 19:28:00 发布
最新推荐文章于 2023-05-23 19:28:00 发布
阅读量203 收藏
点赞数
文章标签： html5 前端 html 开发语言 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45838276/article/details/127560872
版权

1、父组件 

  provide() {
    return {
      data: '传参过去'
    }
  },

2、子组件

inject: ['data'],
console.log(this.data) // 传参过去

注意：

（1）provide 和 inject 绑定并不是可响应的。这是刻意为之的。

（2）执行顺序：data->provide->created->mounted

（3）如果传入的是对象，仍然是响应式！！！！！！！！！！！！！！！！！！！！

007。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue组件通信入门之Provide和Inject机制
10-15
主要给大家介绍了关于Vue组件通信入门之Provide和Inject机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue组件通信具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue组件间通信六种方式（完整版）
weixin_30485799的博客
05-31 264
本文总结了vue组件间通信的几种方式，如props、 $emit/ $on、vuex、 $parent / $children、 $attrs/ $listeners和provide/inject，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。 方法一、props　/$emit 父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit,...
Vue2 传值（父子传值，provide/inject传值，vuex传值）
Realizee的博客
12-08 2238
vue组件间通讯有什么方法： 1） 使用props、$emit 传值 （prop向下传递，事件向上传递；$emit触发父组件的自定义事件） 2） 使用provide、inject 传值 3） 使用bus.js （通过定义公共实例文件来进行非父子组件之间的传值） 4） 使用vuex 父子组件间传参，用props、$emit 比较便利好用； 跨组件传参，用provide/inject ，vuex
provide多级组件传值
weixin_45353536的博客
05-23 646
个人总结
组件传值之 Provide / Inject
qq_42309685的博客
08-20 692
组件传值之 Provide / Inject 用途：组件的多层传值（如父组件向孙组件传值），类似于react的 context； 方法： 父组件通过 provide 提供需要传递的参数（如传递实例上的属性） data(){ return { arr: ['a', 'b', 'c'] } }, provide(){ return { arrV: this.arr } } 子组件（或者孙组件）用 inject 接收 inject: [
组件的吵架方法---组件通讯 17+
yyw的博客
07-17 185
8.1正常情况下需要借助父亲的props作为中间过渡，但是这样在父亲组件就会多了一些跟父组件业务无关的属性，耦合度高，借助$attrs可以简化些，而且祖跟孙都无需做修改。当使用别人的组件时，希望别人的组件进入这个生命周期，父组件做出对应处理，又不好意思改动别人组件时，可以用@hook生命周期=“父组件事件名”，来让父组件做对应的事情。9.3在接受的数据的一方引入Bus.js然后通过Bus.$on(“事件名”,(data)=>{data是接受的数据})如果用在子组件上，引用就指向组件实例..........
vue中的provide/inject的学习使用
08-27
本篇文章主要介绍了vue中的provide/inject的学习使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide： Object | () => Object（一个对象或返回一个对象的函数） inject...
Vue 2.0 中依赖注入 provide/inject组合实战
10-16
主要介绍了Vue 2.0 依赖注入 provide/inject组合，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
浅析vue中的provide / inject 有什么用处
10-16
主要介绍了vue中的provide / inject 有什么用处,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue中几种常见的传参方式
Salange1的博客
10-08 6323
Vue组件传参方也是面试最常考的内容，犹记得当初刚出来实习的时候，遇到一个需求，大概就是一个tabs下面有五个子页面，每个子页面表示订单的一种状态。当时是把五个子页面抽成了五个组件，做完后又有一个问题，就是在一个页面更改了数据状态之后，切换到另一个页面的时候要通知这个页面更新数据，当时是完全没有思路，找带我的大哥教我，讲了半天还是没有懂，最后还是大哥手把手的教我写完的，那时候觉得大哥好厉害，666，现在一想起来，不就是最简单的兄弟组件之前参数传递吗？😓今天就来回忆一下工作中常用的几种组件传参的方式。
vue3 - 17.provide/inject依赖注入（跨级别组件传参）
qq_34111842的博客
10-23 712
在vue中，provide/inject是通过原型链实现的。作用是在根组件注册一次，在其他的子组件都可以访问到数据。
vue2中provide/inject的使用和响应式传值
热门推荐
Min_Fox的博客
03-11 1万+
文章目录前言一、基本用法二、响应式1.方法一：传递的参数用一个方法返回2.方法二：把需要传递的参数定义成一个对象总结 前言 官网概念：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。 一、基本用法 在父组件中使用provide传值，在子组件中用inject接收。 // 父组件 data() { return { name: "卷儿" } }, provide: function() { return {
【Vue】Vue2组件传参总结来了（建议收藏）
10-20 4987
props/emit传参是最基础的组件通信方式，父组件通过props可以向子组件进行通信，子组件通过emit向父组件进行通信。最常见的父子组件通信方式props支持参数验证emit 只会触发父组件的监听事件不适合多层次组件参数传递，需要逐层传递参数通过 $patent / $children 可以拿到父子组件的实例 ，从而调用实例里的数据方法，实现父子组件通信eventBus,相当于所有组件共用一个事件中心，这个事件中心用来管理事件，当我们需要的时候就向事件中心发送或者接收事件。
父子组件传参
荔枝吖阿
11-18 2772
1.props 这个和之前的vue2基本一样 2.provide 父组件向子组件传参 inject 子组件接受父组件传来的参数 *这两个函数只能在 setup() 函数中使用，不限层级 1.父组件中需要先正常引入子组件 import About from "../views/About" 2.父组件引入provide import { defineComponent, provide } from "vue"; 3.和vue2一样注册子组件(在setup函数...
11、组件传值：provide && inject
sunluyi的博客
03-16 892
现在有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
provide/inject传参
Liu_Si_Jia的博客
10-25 312
父组件定义 export default { name: "father", provide() { return { supplierId: () => this.supplierId, manageOrgId:()=>this.manageOrgId }; }, data() { supplierId:"", manageOrgId:"" } } 子组件接收 export default { name: "so.
vue2使用provide/inject父子孙后代组件传值
baiqiangdoudou的博客
12-13 2219
vue2使用provide/inject父子孙后代组件传值
关于组件之间使用provide和inject传值
m0_57311133的博客
04-16 2067
1.在写项目的时候，由于组件封装的层次超过了两层，因而想起了用provide和inject传值的方式。provide和inject都是与data、methods、钩子函数同级,千万不要写错！！ 基础用法如下： 父组件中： provide() { return { parent: this.parent, } }, 孙组件中： provide应该是 一个对象或返回一个对象的函数。 该对象包含可注入其子孙的属性。 ------------------------
vue2和vue3使用起来有什么区别
最新发布
07-27
同时，Vue3还提供了provide和inject，可以在父组件中通过provide暴露属性或方法，子组件通过inject接受，并且只要是父组件的后代，都可以通过inject接收到父组件暴露的值。此外，Vue3还新增了teleport（瞬移）的特性...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值