provide/inject传递响应式数据

一开始用踩了一堆坑,provide怎么写都不行,官网对其响应式的描述原话:

意思就是provide本身不是可响应的,需要传递一个可监听的对象,其对象的属性还是可以响应的,也就是我们在data中要准备一个对象去包裹住我们想传递的数据,相当于不是直接传目标对象,而是传递包裹后的对象,也就是嵌套了一层对象引用:

比如我们想传递一个form表单数据:

data(){
    return {
        formWrapper: {
            form: {}
        }
    }
}
provide(){
    return {
        formWrapper: this.formWrapper
    }
},


// 父组件中传递后然后在子组件中inject接受后,在created中要么取出form赋值给data中的一个数据,要么做为计算属性取出form,来达到传递form的一个方式,这样传递的form子组件修改后数据是会响应的,UI也会更新

一般我们建议直接传递this,也就是父组件的实例,然后子组件直接从实例取属性,不然要在data中套一层对象的引用来实现可监听的对象就很麻烦