聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信。在Vue中,Vue提供了各种各样的组件通信方式,从基础的props/$emit到用于兄弟组件通信的EventBus,再到用于全局数据管理的Vuex。
在这么多的组件通信方式中,provide/inject显得十分阿卡林(毫无存在感)。但是,其实provide/inject也有它们的用武之地。今天,我们就来聊聊Vue中provide/inject的应用。
何为provide/inject
provide/inject是Vue在2.2.0版本新增的API,官网介绍如下:
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉React,这与React的上下文特性很相似。
官网的解释很让人疑惑,那我翻译下这几句话:
provide可以在祖先组件中指定我们想要提供给后代组件的数据或方法,而在任何后代组件中,我们都可以使用inject来接收provide提供的数据或方法。
举个官网的