vue2中provide/inject的使用

已于 2023-12-01 11:14:29 修改
阅读量1k 收藏 1
点赞数
分类专栏： vue2实战记录 文章标签： vue.js
于 2023-05-19 09:13:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37635012/article/details/130759143
版权

一般来说，组件之间有以下几种关系：
在这里插入图片描述
A-B、A-C、B-D、B-E、C-F都是父子关系，B-C、D-E-F是兄弟关系，A-D、A-E、A-F是祖先与孙子关系。

vue2中provide/inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效，一般来说，A-D、A-E、A-F这种祖孙关系的传值我们可以用provide/inject，当然A-B、A-C、B-D、B-E、C-F这种父子关系的传值我们一般用props与emit，你想用provide/inject也行，只是provide/inject传值默认是非响应式的。

一：基本的非响应式传值用法

在祖先组件中使用provide传值，在孙子组件中用inject接收。

// 父组件
data() {
   
  return {
了解本专栏 订阅专栏 解锁全文 超级会员免费看
百思不得小李
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
vue2中的provide和inject
goutinga的博客
09-03 6764
前言 我们云诊室因为是单文件富应用。一个页面无数个无数层组件，用到非常多的props和$emit，今天不小心看到 provide和inject 这两个属性，也可以用来传值，在这里记录一下。首先先来个复习。 复习 父传子：props 子传父：$emit 父获取或调用子的数据或方法：this.$ref['child']，this.$children 子获取父组件的属性或方法：this.$parents 开始 provide和inject是 提供与注入的意思，在这里我想到了nest里面service层作为pr
vue中的provide/inject的学习使用
08-27
本篇文章主要介绍了vue中的provide/inject的学习使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide： Object | () => Object（一个对象或返回一个对象的函数） inject： Array | { [key: string]: string | Symbol | Object }（一个字符串数组，或一个对象，对象的 key 是本地的绑定名） 要实现父子组件响应，父组件传递的数据类型必须是对象Object，子组件接收的数据类型必须是对象Object，其他数据类型都是不好使的 provide和inject响应的例子： 父
VUE2中provide 和 inject用法,以及怎么做响应式数据?
weixin_44244924的博客
03-29 3503
VUE2中provide 和 inject用法,以及怎么做响应式数据
vue3和vue2 之 provide/inject 用法区别 ---vue3组件间通讯2
最新发布
Realizee的博客
04-02 580
provide/inject 主要用于父组件和子孙组件间通讯，简单的父子组件间传值还是使用props、emits或是defineProps、defineEmits、defineExpose比较方便。父组件中提供数据，并在其后代的组件树，无论层级有多深，都可以中注入这些数据，从而实现了组件之间的数据传递。​​不用在父传子，子传孙，孙传重孙等数据传递了（解决了Prop 逐级透传问题）
Vue2.x 的provide 和 inject使用（组件是嵌套关系，但是并不是父子关系）
黄彪博客
05-28 7238
文章目录文章参考问题描述官方案例问题描述说明？解决思路如何理解 provide 和 inject使用场景使用方式例子 文章参考 vue中provide和inject使用 Vue官网-依赖注入 Vue 依赖注入 - Provide/Inject 问题描述 在工作中，发现 一个组件中添加一个添加搜索按钮的属性，就会影响到另外一个搜索的组件，这两个组件同时被一个“布局”组件包裹，不管我怎么控制相关的属性，都没有办法让搜索内容显示出来，最后查看了源码，了解到了使用的技术点 —— inject 和 provid
vue2和vue3 依赖注入
柑橘乌云_
05-11 202
到了 Vue.js 3.0，除了可以继续沿用这种 Options 的依赖注入，还可以使用依赖注入的 API 函数 provide 和。这里要说明的是，inject 函数接受第二个参数作为默认值，如果祖先组件上下文没有提供 theme，则使用这个默认值。这样，我们就可以在子孙组件中通过 this.aaaa访问祖先组件提供的数据，以达到组件通讯的目的。，你可以在 setup 函数中调用它们。
antd ConfigProvider 全局化配置 (vue2 和 vue3)
weixin_45346457的博客
10-27 1万+
在vue3中： // main.js import { ConfigProvider } from 'ant-design-vue'; import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.use(ConfigProvider); app.mount('#app'); // App.vue <template> <a-config-pro
详细讲解vue2组件通信(四)——多代传递provide/inject
浪头的博客
04-19 5202
学一个知识点，我们得知道这个知识点是用来干嘛的？为什么选择用它？怎么用？ provide/inject的作用 vue官网原话【允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深， 并在其上下游关系成立的时间里始终生效。】也就是如果当前组件设置了provide传递数据， 那么在当前组件的所有后辈组件中，都可以使用inject接收这个数据。 provide/inject被选择的理由 组件通信的方式那么多，多代传递数据的通信方式还有vuex，$root，全局事件总线。为什 么选择provide/
vue2.x中的provide和inject用法
老电影故事的博客
01-22 8529
慎用 provide / inject既然 provide/inject 如此好用，那么，为什么 Vue 官方还要推荐我们使用 Vuex，而不是用原生的 API 呢？答： 前面提到过，Vuex 和 provide/inject 最大的区别：Vuex 中的全局状态的每次修改是可以追踪回溯的，而 provide/inject 中变量的修改是无法控制的。换句话说，不知道是哪个组件修改了这个全局状态。
vue2中provide/inject的使用和响应式传值
热门推荐
Min_Fox的博客
03-11 1万+
文章目录前言一、基本用法二、响应式1.方法一：传递的参数用一个方法返回2.方法二：把需要传递的参数定义成一个对象总结 前言 官网概念：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。 一、基本用法 在父组件中使用provide传值，在子组件中用inject接收。 // 父组件 data() { return { name: "卷儿" } }, provide: function() { return {
vue中的provide/inject你知道吗（vue2、vue3）？
weixin_57399180的博客
09-17 6983
“依赖注入”主要是解决父子组件传值“props逐级传递”问题。所以，provide/inject的作用就是组件间的传值。
Vue.js中provide/inject实现响应式数据更新的方法示例
10-16
主要介绍了Vue.js中provide/inject实现响应式数据更新，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
浅析vue中的provide / inject 有什么用处
10-16
主要介绍了vue中的provide / inject 有什么用处,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
聊聊Vue中provide/inject的应用详解
10-16
主要介绍了聊聊Vue中provide/inject的应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue2中的依赖注入的使用provide / inject
ct5211314的博客
06-12 1372
在Vue项目的开发中，我们经常会遇到组件嵌套层级过深的问题，常用的两种方式，链式调用以及emit触发，在多组件嵌套中都有一定的不足，例如链式调用记得的降低了组件的可复用性，因为组件后面所处的层级是可变的，另一边emit触发方法的传递则需要传递的层数过多，代码过于臃肿，不易维护，所以对于多组件嵌套来说，我们建议通过provide / inject进行方法以及属性的传递。
Vue 依赖注入 - Provide/Inject
顺其自然~专栏
04-18 869
官网传送门：inject Vue2.2.0+ # 背景   关于Vue组件的通讯方式相信大家能倒背如流 父子组件：通过prop、$emit、【$root，$parent，$children】 非父子组件：Vuex实现、父子层层传递、中央事务总线Bus，$ref 子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。应当节制地使用它们，其只是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信. Vue官网建议，在正常.
Vue2中$ref、$emit、props、model、provide / inject 的传参方式区别和使用及使用场景
织网的博客
03-26 2800
概述 $ref、$emit、props、model是 Vue2 中常见的传参方式，可以实现组件与组件之间的数据传递和交互 $ref的使用方式 父组件： <template> <div> <h1>我是父组件！</h1> <child ref="msg"></child> </div> </template> <script> import Child from '../componen
vue的provide/inject实现响应式数据监听
yw00yw的博客
07-14 1万+
provide/inject 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 无论多少层都会被子组建拿到 主要用在高阶组件 provide 选项应该是一个对象或返回一个对象的函数。 inject 选项应该是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名 提示： provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 正常使用

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值