开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 15 天，点击查看活动详情

说点题外话

之前用了很多章介绍了父子组件通信：

关于父子组件的全部通信内容就不再占用篇章叙述了，今天这篇将介绍非父子组件通信

说正文

先说一个组件的引用结构：App.vue -> Home.vue -> HomeContent.vue

先来说说为什么需要非父子组件传参，我们可以想象一下，我们有5个组件是逐级引用的，那么我们需要props沿着组件引用定义传参，那么此刻的场面会相当混乱，也不利于我们后期维护代码。

官方提供了provide和inject来帮助我们解决多层props嵌套的问题。一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

比如下面这张图，我们想要给DeepChild传递参数就可以使用provide和inject这两个方法