Vue-provide和inject

provide和inject

• 在2.2.0版本新增
• 类型：
  • provide：Object | () => Object
  • inject：Array<string> | { [key: string]: string | Symbol | Object }
• 作用：实现祖孙组件间通信,即父组件定义，后面所有子代组件都能用
• 套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据

官方提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

在Vue3中的简单使用

// 祖组件
import {reactive} from 'vue'
setup() {
    let car = reactive({
        name: '奥迪',
        price: '100W'
    })
    provide('car',car)
}
// 后代组件
import {inject} from 'vue'
setup(props,context) {
    const car = inject('car')
    return {
        car
    }
}