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')