1.作用场景：
顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信
2.跨层传递普通数据
1.顶层组件通过provide函数提供数据
2.底层组件通过inject函数获取数据
顶层组件
//1.顶层组件提供数据
provide('data-key','this is room data')
底层组件
import { inject } from 'vue';
//2.接收数据
const roomData = inject('data-key')
3.跨层传递响应数据
顶层组件
//传递响应式数据
const count1 = ref(0)
provide('count-key',count1)
setTimeout(()=>{
count1.value = 100
},3000)
底层组件
import { inject } from 'vue';
// 接收响应式数据
const countData = inject('count-key')
4.跨层传递方法
顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件中的数据
顶层组件文章来源：https://www.toymoban.com/news/detail-803760.html
//传递方法（谁的数据谁负责修改）
const setCount = () => {
count1.value++
}
provide('setCount-key',setCount)
底层组件文章来源地址https://www.toymoban.com/news/detail-803760.html
import { inject } from 'vue';
// 接收响应式数据
const setCount = inject('setCount-key')
到了这里，关于vue3-provide和inject的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
