vue3中的provide 与 inject

 

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

 

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

• 具体写法（需要引入）：

祖组件中

import { provide } from "vue";


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

后代组件中：

import { inject } from "vue";


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

这些使用了父组件中的数据都是响应式的 

一般子组件还是使用props传递

 参考链接：

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=162&spm_id_from=pageDriver