作用和场景:顶层组件向任意的底层组件 传递数据和方法,实现 跨层组件通信
跨层传递普通数据 步骤:
1. 顶层组件通过 provide 函数提供数据
provide ( ' key ' , 顶层组件中的数据 )
2. 底层组件通过 inject 函数获取数据
const message = inject ( ' key ' ) // 'key':键名,与上一步的名字统一
跨层传递响应式数据 步骤:
1. 顶层组件通过 provide 函数提供数据
const count = ref (100)
provide ( ' count ' , count )
2. 底层组件通过 inject 函数获取数据
const count = inject ( ' count ' ) // 'key':键名,与上一步的名字统一
底层组件 不能直接修改 顶层组件传过来的数据,顶层组件需要给底层组件提供可以修改数据的函数
顶层组件:
provide ( ' changeCount ' , (newCount) => {
count.value = newCount
})
底层组件:
const changeCount = inject ( ' changeCount ' )
const ButtonClick = () => {
changeCount (666)
}