组件通信-provide/inject

vue 通过 provide/inject 钩子可以实现父子组件间通信，父 => 子

父组件通过 provide 向下层组件（子组件、子子组件等等都可以用）提供数据，下层组件使用 inject 注入到当前组件中。

注意：

　　1.对于基本数据类型，传递的数据不会携带响应式。（可采用函数返回值的方式，使传递的数据依然存在响应式）

　　2.对于引用数据类型，对象内部的属性依然有响应式

如下所示：

　　getA 在子组件中，响应式丢失，只是基本数据类型

　　getAFunc 的返回值 和 getB 中的属性 x 依然具有响应式

// 父组件
export default {
    name:"Student",
    data(){
        return{
            a: 1,
            b: { x: 2 }
        }
    },
    provide(){
        return{
            getA:this.a,
            getAFunc: ()=> this.a,
            getB: this.b
        }
    },
    methods:{
        add(){
            this.a++
            this.b.x++
        }
    }
}

// 子组件
export default {
    name:"Class1",
    inject: ["getA", "getAFunc", "getB"]
}