前言

官方解释provide和inject,以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

---

一、基本用法：

在父组件使用provide向子孙后代组件传旨，在子孙后代组件中使用inject接收父组件传下来的值

// 父组件
data() {
    return {
        name: '张三'
    }
},
provide() {
    return {
        name: this.name
    }
}

// 子组件
inject: ['name']

这样传递给子组件的数据是没有响应式的， 当改变父组件中的name，子组建中接收的name不会改变。

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

二、响应式：

1、方法一：传递的参数用一个方法返回

// 父组件
data() {
    return {
        name: '张三'
    }
},
provide() {
    return {
        newName: () => this.name
    }
}

// 子组件
inject: ['newName'],
computed: {
    hNewName() {
        return this.newName
    }
}

<!-- 子组件中使用方式 -->
<h2>{{ hNewName }}</h2> <!--推荐使用这种方式(结合计算属性使用)-->
或者
<!-- 直接调用 -->
<h2>{{ newName() }}</h2>

2、方法二：把需要传递的参数定义成一个对象

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

// 父组件
data() {
    return {
        obj: {
            name: '张三'
        }
    }
},
provide() {
    return {
        obj: this.obj
    }
}

// 子组件
inject: ['obj'],
computed: {
    objName() {
        return this.obj.name
    }
}

<!--子组件中使用-->
<h2>{{objName}}</h2> <!--通过计算属性访问-->

或者

<h2>{{obj.name}}</h2><!--直接访问-->

总结：

主要解决深层次的组件嵌套，祖先组件向子孙组件之间传值。
一层嵌套的父子组件可以使用props来传值。
根据自身代码选择合适的传值方式，并不一定非要用provide/inject的传值。