父组件中提供数据，并在子组件中注入这些数据，从而实现了组件之间的数据传递。可用于兄弟组件通信，爷孙组件通信，父子通信。
provide( '注入名', 注入值" ) 和 inject('注入名')
第一代组件：
<template>
<div >我是第一代组件</div>
<Two />
</template>
<script setup lang='ts'>
import Two from "./components/Two"; // 引入第二代组件
import { provide, ref} from 'vue';
const obj = ref<any>({name: 'coderkey',age:18})
provide('userInfo',obj )
</script>
第二代组件：
<template>
<div >我是第二代组件</div>
<Three />
</template>
<script setup lang='ts'>
import Three from "./components/Three "; // 引入第三代组件
</script>
第三代组件：
<template>
<div >我是第三代组件</div>
</template>
<script setup lang='ts'>
import { inject, ref，onMounted } from 'vue';
const obj = ref<any>({name: 'coderkey',age:18})
onMounted(() =>{
const msg = inject('userInfo')
console.log(msg.value) // {name: 'coderkey',age:18} // 响应式数据
})
</script>
这样子第一代组件的数据就可以传递给第三代组件使用了，数据还是响应式的。