vue组件通讯之provide / inject

简介: vue组件通讯之provide / inject

什么是 provide / inject [传送门]

vue的组件通讯方式我们熟知的有 props $emit bus vuex ,另外就是 provide/inject

provide/inject  是 Vue.js 2.2.0 版本后新增的 API,在文档中这样介绍 :

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
inject 选项应该是:
• 一个字符串数组,或
• 一个对象,对象的 key 是本地的绑定名,value 是:
• 在可用的注入内容中搜索用的 key (字符串或 Symbol),或
• 一个对象,该对象的:
• from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
• default 属性是降级情况下使用的 value
提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
并且文档中有如下提示:
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

使用的例子:

// 父级组件提供 'foo'
var Provider = {
    provide: {
        foo: 'bar'
    },
}
// 子组件注入 'foo'
var Child = {
    inject: ['foo'],
    created () {
        console.log(this.foo) // => "bar"
     }
}

相关文章
|
9天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
107 2
|
2月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
105 0
|
2月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
237 1
|
JavaScript
Vue的非父子组件之间传值
全局事件总线 一种组件间通信的方式,适用于任意组件间通信
189 0
|
缓存 JavaScript 前端开发
Vue Props、Slot、v-once、非父子组件间的传值....
Vue Props、Slot、v-once、非父子组件间的传值....
157 0
|
JavaScript
Vue中父子组件传值
先在⽗组件中给⼦组件的⾃定义属性绑定⼀个⽗组件的变量
154 0
|
JavaScript
vue 组件传值
vue 组件传值
146 0
|
JavaScript
vue父子组件传值
vue父子组件传值
|
JavaScript
vue兄弟组件传值 方便快捷
vue兄弟组件传值 方便快捷
|
JavaScript
Vue父子组件传值(porvide+inject实现组件通信)
如果我们需要把父组件的值传递给子组件,而且子组件可能存在层层嵌套,那么就可以使用provide+inject的方法来实现组件之间的通信
240 0
Vue父子组件传值(porvide+inject实现组件通信)