Vue 3 中依赖注入（provide和inject）的使用

当多个组件出现如下图所示的情况可使用依赖注入：（详细介绍请移步官网）

provide

在父组件中使用 provide 函数来声明要提供的依赖。例如：

<script setup>
import { provide } from 'vue'

const message = 'Hello from parent'

provide('message', message)
</script>

inject

在子组件中使用 inject 函数来接收这些依赖。例如：

<script setup>
import { inject } from 'vue'

const message = inject('message')

console.log(message) // 输出：'Hello from parent'
</script>

注意：函数同样可以进行依赖注入 。