provide / inject
描述
provide
选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。
inject
一个字符串数组,或一个对象,对象的 key 是本地的绑定名。
作用
以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。
需要关注的是
provide
和inject
绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。
具体使用
在祖先组件里声明并提供 刷新 方法,并 v-if 来设置是否重新渲染
<!-- 祖先组件 -->
<template>
<div id="ancestor">
<router-view v-if="showPage"></router-view>
</div>
</template>
export default {
name: 'ancestor',
// 提供子孙可注入的依赖
provide() {
return {
reload: this.reload
}
},
data() {
return {
showPage: true
}
},
methods: {
reload() {
this.showPage = false;
// 在下次 DOM 更新循环结束之后执行延迟回调。
// 在修改数据之后立即使用这个方法,获取更新后的 DOM。
this.$nextTick(() => {
this.showPage = false;
})
}
}
}
子孙组件里通过注入的方法调用祖先组件里的方法实现刷新当前页.
export default {
// 注入祖先组件提供的reload
inject: ['reload'],
methods: {
setPageReload() {
// 调用祖先组件的reload方法
this.reload();
}
}
}
采用 provide / inject 原因
-
用
vue-router
重新路由到当前页面,页面组件不会更新状态 -
采用
window.reload()
,或者router.go(0)
刷新时,浏览器会重新加载系统,造成页面闪烁等