Vue组件间通信的Provide和Inject机制如何实现长距离数据传递？

本文共计961个文字，预计阅读时间需要4分钟。

前言：Vue中父子组件之间的通信主要依靠子组件的props属性实现。但在某些情况下，父组件无法直接向子组件的props传递值。例如，子组件通过父组件的slot进入，父组件基本不知道子组件的存在。

前言

Vue中父组件到子组件的通信主要由子组件的props属性实现。但是在一些情况下，父组件无法直接向子组件的props传值。比如子组件通过父组件的slot进入父组件，父组件根本不知道子组件是谁，更不用说用子组件的props了。这时应该怎么办呢？Vue在2.2.0版本引入了provide与inject，正好适合处理这一情况。

什么是provide与inject

用文档的话说：

provide/inject需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。

这就是说从父组件的provide属性传入一个对象，子组件（或者是孙组件，只要是子级组件）可以用inject属性接收父组件的provide属性。