vue父子组件实现跨层级调用祖父级调用

当然要用到VUE下面两个API

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。

子组件可以直接调用父组件或祖先父组件的方法或数据。

provide 、inject 是VUE非常实用的夸多级传参合调用的API，实用熟练必将事半功倍！