Vue3| 组合式 API——provide 和 inject

发布时间 2023-10-14 15:06:05作者: 嘎嘎鸭2

作用和场景:顶层组件向任意的底层组件 传递数据和方法,实现 跨层组件通信

 

跨层传递普通数据 步骤:

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)

}