用于解决跨组件（父组件与所有后代）数据通信
提供数据 provide
传出数据的组件 （通常为父辈组件）提供数据
<script setup>
import { provide } from 'vue'
provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>
provide() 函数
- 第1个参数 —— 注入名，字符串或 Symbol
- 第2个参数 —— 注入值，任意类型（若为 ref，则后代组件与父组件会建立响应式的联系）
注入数据 Inject
需要数据的组件 （通常为后代组件）注入数据
<script setup>
import { inject } from 'vue'
const message = inject('message')
</script>
可添加默认值（当父组件未提供数据时使用）
const value = inject('message', '这是默认值')
当默认值需要通过调用一个函数或初始化一个类来取得时，为了避免在用不到默认值的情况下进行不必要的计算或产生副作用，可以使用工厂函数来创建默认值：
const value = inject('key', () => new ExpensiveClass(), true)
第三个参数 true 表示默认值应该被当作一个工厂函数。
数据使用方修改响应式数据
建议尽可能将对响应式状态的变更都保持在供给方组件中，以便更容易维护。
但有时数据使用方需要修改响应式数据，怎么办？
可以在供给方组件内声明并提供一个更改数据的方法函数
<!-- 在供给方组件内 -->
<script setup>
import { provide, ref } from 'vue'
const location = ref('North Pole')
function updateLocation() {
location.value = 'South Pole'
}
provide('location', {
location,
updateLocation
})
</script>
<!-- 在注入方组件 -->
<script setup>
import { inject } from 'vue'
const { location, updateLocation } = inject('location')
</script>
<template>
<button @click="updateLocation">{{ location }}</button>
</template>
使用 readonly() 来包装提供的值，可以确保提供的数据不能被注入方的组件更改
<script setup>
import { ref, provide, readonly } from 'vue'
const count = ref(0)
provide('read-only-count', readonly(count))
</script>
使用 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)
提供全局数据 app provide
常用于编写插件
import { createApp } from 'vue'
const app = createApp({})
app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
