Vue3.0 provide与inject依赖注入：VCA

简介

provide 与 inject 是一种跨层级组件（祖孙）通信方式。当组件多层嵌套时，不需要将数据一层一层的向下传递，通过它俩可以实现跨层级组件通信。

provide：提供者

注入一个值，可以被后代组件接收。

provide它接受两个参数：

1. 第一个参数是要注入的 key，可以是一个字符串或者一个 symbol。
2. 第二个参数是要注入的值。

inject：接收者

接收一个由祖先组件或整个应用 (通过 app.provide()) 注入的值。

inject它接受两个参数：

1. 第一个参数是注入的 key，找不到对应的 key，则返回 undefined 或默认值。
   1. Vue 会遍历父组件链，通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会 "覆盖" 链上更远的组件所提供的值。如果没有能通过 key 匹配到值，inject 将返回 undefined，除非提供了一个默认值。
2. 第二个参数是默认值，非必填，也可以是一个工厂函数。

如果默认值本身就是一个函数，那么你必须将 false 作为第三个参数传入，表明这个函数就是默认值，而不是一个工厂函数。

const fn = inject('function', () => {}, false)

案列

App.vue组件

Child.vue子组件