vue局部刷新组件&如何实现优雅的刷新页面（provide，inject用法）

一、背景

在开发项目的过程中，有时修改后台的数据变化可能不会及时更新到页面上，此时就需要我们刷新页面更新数据，但是直接调用刷新window.location.reload()可能对操作的体验不是很好，所以就需要下面的方法。

列举个场景，比如修改主体content内容，我想要刷新主体部分的组件，但是不刷新title和aside组件，怎么实现呢？

实现方法就是在想要刷新的组件中封装一个方法，当需要刷新页面时直接调用这个方法就可以无痕迹刷新这个组件（页面）！

代码：

1、在app.vue中封装方法，此时调用可以刷新整个系统（整个页面）

<template>
	<div class="app-file">
		<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>

<script>
export default {
	provide() {
		return {
			reloadAll: this.reloadAll
		}
	},
	data() {
		return {
			isRouterAlive: true
		}
	},
	methods: {
		reloadAll() {
			this.isRouterAlive = false
			this.$nextTick(() => {
				this.isRouterAlive = true
			})
		}
	}
}
</script>

<style lang="scss" scoped>
</style>

2、第二部，在想要实现刷新方法的组件引用及调用

 

 3、这样在调用就可以实现我们想要的效果，同理，也可应用到其他组件，如开头所列举的场景：

 这样就可以实现选择性的刷新头部，侧边导航栏的组件了！

二、原理

provide/inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

provide / inject 是在 VUE 2.2.0 的版本新增的

类型：
provide: Object | () => Object

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作

inject: Array<String> | { [key:string]:  string | symbol | Object }

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

例子：

 

 

我们可以看到 breadcrumb.vue 父组件中，通过 provide 向子孙组件提供了当前vue的实例。而breadcrumb-item.vue子组件中，通过inject属性访问了父组件中提供的elBreadcrumb的值，即当前vue的实例。这样我们就可以不用通过$parent一级一级的去访问了。

使用场景：vue有$parent属性可以让子组件访问父组件。但子孙组件想要访问祖先组件就比较困难。这时候可以通过provide/inject来实现跨级访问祖先组件的数据。

 

 

参考官网：https://cn.vuejs.org/v2/api/#provide-inject

末尾部分引自：https://www.jianshu.com/p/c4ee6006994c