Vue3全局组件通信之provide / inject详解

目录

• 1、前言
• 2、provide / inject
• 3、发起 provide
• 4、接收 inject
• 5、响应性数据的传递与接收
• 6、引用类型的传递与接收 (针对非响应性数据的处理)
• 7、基本类型的传递与接收 (针对非响应性数据的处理)

1、前言

顾名思义，爷孙组件是比 父子组件通信 要更深层次的引用关系（也有称之为 “隔代组件”）：

C组件引入到B组件里，B组件引入到A组件里渲染，此时A是C的爷爷级别（可能还有更多层级关系），如果你用 props ，只能一级一级传递下去，那就太繁琐了，因此我们需要更直接的通信方式。

他们之间的关系如下，Grandson.vue 并非直接挂载在 Grandfather.vue 下面，他们之间还隔着至少一个 Son.vue （可能有多个）：

Grandfather.vue
└─Son.vue
  └─Grandson.vue