vue系列之provide / inject

vue官方provide / inject：

This pair of options are used together to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain.
可以用来操作所有拥有同一父组件的子组件

最近有个项目：iview的menu（如果从一个导航页跳转到另一个导航页，this.$refs.menu.updateActiveName()没有用，所以看到了provide/inject这个方法）

//app.vue直接绑定prop重新渲染发生mounted执行
<router-view v-if="isRouterAlive" ></router-view>

//在app.vue父组件provide声明所需的prop
export default {
	name: 'app',
	provide() {
		return {
			reload: this.reload
		}
	},
	data(){
		return {
			isRouterAlive: true
		}
	},
	methods: {
		reload (){
			this.isRouterAlive = false
			this.$nextTick(() => {
				this.isRouterAlive = true
			})
		}
	}
}

//在所需的子组建里面inject所需的prop，mounted执行this.$refs.menu.updateActiveName()
inject: ['reload'],
mounted(){
        this.$nextTick(() => {
            this.$emit('update:menu', this.$route.path.slice(1))
            this.$refs.menu.updateOpened()
            this.$refs.menu.updateActiveName()
        })
        // if(!this.$route.params.loginStatus)  this.$emit('update:loginStatus',this.$route.params.loginStatus)
    }

如果有好的方法欢迎补充撒