参考： https://segmentfault.com/a/1190000018563193

provide 、inject

provide / inject 是 Vue 在 2.2.0 版本后新增的 API。

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 也就是在父组件中提供一个值，并且在需要使用的子孙组件中注入改值，即：

// Parent.vue
export default {
          
   
	// 提供可注入子组件属性
    provide() {
          
   
        return {
          
   
        	// 向子组件中注入方法
        	routerRefresh: this.reloadRouter
        	// 向子组件中注入数据
            name: Stone
        }
    }，
    methods:{
          
   
    	reloadRouter() {
          
   
             // 局部刷新整路由页面
             // 先移除组件
             this.refresh = false
             // 在组件移除后，重新渲染组件
             // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
             this.$nextTick(() => {
          
   
                 this.refresh = true
             })
         },
	}
}
// Child.vue
export default {
          
   
	// 接收注入的数据
    inject: [
        routerRefresh,
        name
    ],
    mounted() {
          
   
       console.log(this.name)
   },
   methods:{
          
   
		callParentsMethod(){
          
   
           this.routerRefresh()
        }
	}
}

不仅仅是 Child.vue ，只要是 Parent.vue 的子组件，无论隔多少代，都可以通过这个的方式注入。 这种多级组件透传的方式可以保证单向数据流的清晰性，例如像用户信息这样的全局信息，就可以借助这两个 API 来完成，而没有引入第三方库 vuex。子组件可以直接调用父组件或祖先父组件的方法或数据。