Vue3 的 provide / inject 使用[爷孙通信]

在组合式 API 中使用 provide/inject，两个只能在 setup 期间调用，使用之前，必须从 vue 显示导入 provide/inject 方法。

provide 和 inject 通常成对一起使用，使一个祖先组件作为其后代组件的依赖注入方，无论这个组件的层级有多深都可以注入成功，只要他们处于同一条组件链上。

这个 provide 选项应当是一个对象或是返回一个对象的函数。这个对象包含了可注入其后代组件的属性。你可以在这个对象中使用 Symbol 类型的值作为 key。

 

添加为响应式：

provide第二个参数是提供的值，值可以是任意类型，包括响应式的状态，比如一个 ref：

inject

1. 如果提供的值是一个 ref，注入进来的会是该 ref 对象，而不会自动解包为其内部的值。
2. 这使得注入方组件能够通过 ref 对象保持了和供给方的响应性链接。

父组件

//父组件代码
<script>
import { provide } from "vue"
export default {
  setup(){
    provide('info',"值")
  }
}
</script>

子组件

//子组件 代码
<template>
 {{info}}
</template>
<script>
import { inject } from "vue"
export default {
  setup(){
    const info = inject('info')
    return{
      info
    }
  }
}
</script>

参考文章