Vue组件通信：依赖注入(provide + inject)

Vue3文档：https://cn.vuejs.org/guide/components/provide-inject.html

Prop 逐级透传问题

多级组件 props 传值，组件链路非常长，不利于维护

provide 和 inject 可以帮助我们解决这一问题

Provide (提供)

import { provide } from 'vue'

export default {
  setup() {
    provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
  }
}

provide() 函数接收两个参数：
第一个参数被称为注入名（key），可以是一个字符串或是一个 Symbol。、
第二个参数是提供的值（value），值可以是任意类型

Inject (注入)

import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}

注入默认值?

默认情况下，inject 假设传入的注入名会被某个祖先链上的组件提供。如果该注入名的确没有任何组件提供，则会抛出一个运行时警告。
如果在注入一个值时不要求必须有提供者，那么我们应该声明一个默认值，和 props 类似：

// 如果没有祖先组件提供 "message"
// `value` 会是 "这是默认值"
const value = inject('message', '这是默认值')

使用 Symbol 作注入名

如果构建大型的应用，包含非常多的依赖提供，建议最好使用 Symbol 来作为注入名以避免潜在的冲突。
通常推荐在一个单独的文件中导出这些注入名 Symbol：

// keys.js
export const myInjectionKey = Symbol()

// 在供给方组件中
import { provide } from 'vue'
import { myInjectionKey } from './keys.js'

provide(myInjectionKey, { /*
  要提供的数据
*/ });

// 注入方组件
import { inject } from 'vue'
import { myInjectionKey } from './keys.js'

const injected = inject(myInjectionKey)