vue3依赖注入（provide 和 inject）

依赖注入（provide 和 inject），解决Prop 逐级透传问题。跨多组件转递参数，避免使用Prop 逐级透传。

1. 父组件要为组件后代提供数据，需要使用到 provide() 函数：

<script setup>
import { provide,ref,app  } from 'vue'
//使用 Symbol 来作为注入名以避免潜在的冲突
//const myInjectionKey = Symbol()可以单独放在一个文件，大型项目中好管理
const myInjectionKey = Symbol()
provide(/* 注入名1 */ myInjectionKey , /* 值 */ 'hello!')

//可以多个使用
const myInjectionKey2 = Symbol()
provide(/* 注入名2 */ myInjectionKey2 , /* 值 */ 'hello!')

//第二个参数是提供的值，值可以是任意类型，包括响应式的状态，比如一个 ref：
//使用方可以和提供方保持响应性
const count = ref(0)
provide('key', count)

//还可以全局提供依赖
const app = createApp({})
app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>

2. 后代组件要注入上层组件提供的数据，需使用 inject() 函数：

<script setup>
import { inject } from 'vue'
//默认值
const value = inject('message', '这是默认值')

//可以使用工厂函数来创建默认值
const value = inject('key', () => new ExpensiveClass(), true)
</script>

3. 和响应式数据配合使用

<!-- 在提供方组件内用法 -->
<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>

4. 提供的数据不想被使用方更改，使用 readonly() 来包装提供的值。

<script setup>
import { ref, provide, readonly } from 'vue'

const count = ref(0)
provide('read-only-count', readonly(count))
</script>