Vue3中常用的Composition(组合)API-provide 与 inject

provide 与 inject

provide与inject是一种组件中的通信方式。适应于祖孙间通信，祖孙组件也叫跨级组件，因为祖孙组件之间隔了一个父组件

provide译为提供，一般是提供数据

inject译为注入，注入数据

通过provide把数据给祖组件了，然后通过inject可以得到数据，他俩都是函数，可以直接调用，使用起来特别简单

provide 与 inject主要是实现祖与后代组件间通信，如果父子之间通信，可以使用props

下面就通过代码演示一下祖孙间的provide与inject数据交互

创建祖孙组件

首先遇到做点准备工作，创建一个祖孙组件

这里我以App作为祖组件，Child作为子组件，Son作为孙组件，并且都给了点样式

接下来就是一个套娃的效果，其实就是App中引入Child组件并使用，Child组件引入Son组件并使用：

然后一个简单的套娃就出现了

现在我想要把App祖组件传给Son孙组件，可以先给APP准备点数据:

这样数据就造好了，接下来就可以传递给Son孙组件了

引入provide

  import {provide} from 'vue'

使用provide

provide都是函数，直接调用即可，需要传递两个参数：

参数1：数据变量

参数2：真正要传递的数据

到这里数据以及提供过去了，provide的代码也就编写完了，接下来是引入inject并使用

引入inject

import {inject} from 'vue'

使用inject

inject只有一个参数，就是provide传递数据的参数名称

数据可以正常接收，并且是响应式的

这样就完成了使用provide和inject祖孙组件的数据交互

总结

• 作用：实现祖与后代组件间通信

• 套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

• 具体写法：

  •   1 祖组件中：

  • setup(){
            ......
        let car = reactive({name:'奔驰',price:'40万'})
        provide('car',car)
        ......
    }
    

2 后代组件中：

setup(props,context){
        ......
    const car = inject('car')
    return {car}
        ......
}