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
}
}