VUE3 Provide / Inject传递函数

最新推荐文章于 2025-05-27 16:36:08 发布
最新推荐文章于 2025-05-27 16:36:08 发布
阅读量4.5k 收藏 5
点赞数 2
CC 4.0 BY-SA版权
分类专栏： VUE学习 文章标签： vue.js
原文链接：https://www.zhihu.com/question/436835438
本文介绍了如何使用Vue的Provide/Inject选项在组件层级中实现通信，特别是在爷爷组件到孙子组件的通信场景下。提供了两种方法：一种直接注入函数，另一种则是传递属性。这种方法避免了使用Vuex等状态管理工具，简化了小型应用的通信流程。

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

通过 Provide / Inject将爷爷组件内的方法暴露给孙子组件调用

方法一：

爷爷组件代码

const Get_list = () => {
      console.log('Get_list 方法被执行')
    }
 provide('Call_Get_list',Get_list)

孙子组件代码

    const update=inject('Call_Get_list') as Function
    update()

方法二：源URL（没试验过）

爷爷组件代码

provide('isCompleted',isCompleted)

孙子组件代码

const isCompleteds = inject('isCompleted',Function,true)
Vue3组件通信之一_provide()与inject()依赖注入函数
yuanjinshenglife的专栏
03-05 1679
Vue3组件通信之一_provide()与inject()依赖注入函数，优雅实现组件之间的传值功能
Vue3的Provide/Inject 机制详解
monk all the way
05-08 555
Provide/Inject 是 Vue 3 中用于的重要 API，特别适合解决"prop 逐级透传"的问题。
vue3嵌套组件传递数据＜provide和inject＞
mkbird的博客
05-09 1910
provide和inject provide() 和 inject() 可以实现嵌套组件之间的数据传递。这两个函数只能在 setup() 函数中使用。父级组件中使用 provide() 函数向下传递数据；子级组件中使用 inject() 获取上层传递过来的数据。 共享普通数据 App.vue 根组件： <template> <div id="app"> <h1>App 根组件</h1> <hr /> <LevelO
组合API-provide和inject函数
最新发布
qq_45585640的博客
05-27 455
组合API-provide和inject函数
Vue3-provide和inject
weixin_46479909的博客
11-23 1091
但是底层组件不能修改顶层组件传递过来的数据，所以我们可以在顶层组件中跨层传递函数，给子孙后代传递可以修改数据的方法。既可以传递普通数据，也可以使用ref传递响应式数据（顶层组件修改数据后可以响应过去）作用和场景：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信。这样就可以把父组件里的count改为1000了。1.顶层组件通过provide函数提供数据。2.底层组件通过inject函数获取数据。
Vue3 关于 provide、inject 的用法
m0_71349739的博客
12-22 2885
在前端项目中牵扯的最多的莫过于组件之间的传值了，除了最最常用的。
Vue3 Provide / Inject
Flying_Fish_roe的博客
01-15 3003
provide和inject是Vue 3中用于实现依赖注入的API。它们允许一个组件（通常是祖先组件）向其后代组件提供数据或方法，而无需通过中间组件逐层传递。这种方式类似于依赖注入框架中的提供者和注入器，极大地简化了组件间的通信。Provide：在一个组件中声明要提供给后代组件的数据或方法。Inject：在后代组件中声明要注入的依赖，从祖先组件中获取提供的数据或方法。provide和inject是Vue 3中强大的依赖注入工具，简化了组件间的通信，特别是在处理深层组件结构和共享全局依赖时。
Vue.js中provide/inject实现响应式数据更新的方法示例
10-16
Vue.js的`provide/inject`选项提供了一种在组件祖先和子孙之间传递数据的方法，它跳过了中间组件的层级，这对于非直接父子关系的组件通信非常有用。然而，要注意的是，这种通信方式并不是响应式的，这意味着如果你...
vue3中 provide/inject用法详解
红烧咸咸鱼
08-02 967
vue3中 provide/inject用法详解
（二）Vue3-跨层组件通信Provide/Inject机制详解
cuijiying的博客
01-06 1133
Vue 3 中的 `Provide` 和 `Inject` 机制是专为跨层级传递数据而设计的，适用于祖先组件和后代组件之间的通信。与`props` 和 `emits` 不同，`Provide/Inject` 可以跨越多个层级进行数据传递，而不需要逐层传递。
vue3学习教程第十一节（依赖注入：provide/inject父子传参）
刺客-Andy 的博客
03-25 1938
vue 项目中，组件直接的通讯之依赖注入：provide/inject；全局依赖注入，父子祖孙之间通讯
vue3.0学习笔记 (provide和inject组件传递数据)
m0_58849641的博客
07-09 1064
1.在子或者后代组件用inject注入数据进去
Vue3 跨组件传参 provide 与 inject
xiaowude_boke的博客
03-26 998
Vue3 跨组件传参 provide 与 inject
vue3中使用provide跨层传值（方法）
月影神社
07-09 378
provide有两个参数，第一个是我们传递的key，第二个就是value了。1.使用provide inject 跨层实现。
Vue3的provide、inject使用方法
weixin_50368372的博客
04-19 3913
需要注意的是，在使用 provide 和 inject 方法时，建议使用字符串键值，以避免出现命名冲突。
vue3的provide函数和inject函数真简单，后组件通讯,子孙父通信。
qq_54753561的博客
11-13 1930
使用场景：有个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据 1、父组件里面这样写入 <template> <div class="box"> <h2>父组件{{ num }}元</h2> <button @click="num++">加</button> </div> </template> <script setup> // 要引入 provi...
vue组件间通信六种方式（完整版）
weixin_30485799的博客
05-31 313
本文总结了vue组件间通信的几种方式，如props、 $emit/ $on、vuex、 $parent / $children、 $attrs/ $listeners和provide/inject，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。 方法一、props　/$emit 父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit,...
vue3.x 组件传递函数
天天的博客
12-12 2492
定义要传递的属性类型 2， 传递属性 3， 使用 行，下一篇，我们将去测试emit 插槽啥的，都能搞定！
vue3之provide和inject函数()
weixin_47039303的博客
12-23 374
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app" > <son></son> </div> </body> <script src="js/vue3.j
vue2provide/inject传递方法
01-16
### 使用 `provide` 和 `inject` 在 Vue 2 中传递方法 在 Vue 2 中，`provide` 和 `inject` 主要用于父子组件之间的依赖注入。这使得父组件可以作为其所有子组件的依赖提供者，无论它们嵌套多深。 #### 定义 Provide 方法 父组件可以通过 `provide` 属性来定义需要共享的方法： ```javascript // ParentComponent.vue export default { data() { return { message: &#39;Hello from parent&#39; } }, provide() { return { greetFromParent: this.greet.bind(this) }; }, methods: { greet(name) { console.log(`${this.message}, ${name}!`); } } }; ``` 这里需要注意的是，在返回的对象中提供的函数应当绑定当前实例上下文 (`this`) 来确保当被调用时能访问到正确的数据属性和其他方法[^1]。 #### 注入 Injected 方法 子组件通过 `inject` 属性声明它想要接收哪些资源，并可以直接使用这些已注册的名字作为局部变量名或选项对象键值对的形式引入所需的服务或功能： ```javascript // ChildComponent.vue export default { inject: [&#39;greetFromParent&#39;], mounted() { // 调用来自父级提供的方法 this.greetFromParent(&#39;child&#39;); } } ``` 这种方式不仅限于简单的字符串或其他基本类型的传递；也可以像上面例子那样传递复杂的数据结构如对象、数组甚至是自定义类实例等[^2]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值