vue3-provide和inject

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.跨层传递方法

顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件中的数据
顶层组件

//传递方法（谁的数据谁负责修改）
const setCount = () => {
  count1.value++
}
provide('setCount-key',setCount)

底层组件

import { inject } from 'vue';
// 接收响应式数据
const setCount = inject('setCount-key')