vue刷新当前页面--provide / inject 用法

window.reload()/router.go(0):
采用window.reload()，或者router.go(0)刷新时，整个浏览器重新加载，闪烁。严重影响体验
provide / inject:
允许一个祖先组件向其所有子孙注入一个依赖，关系建立时间里始终生效

App.vue

<template><div id="app"><router-view v-if="isRouterAlive" /></div>
</template><script>
export default {name: 'App',provide() { // 父组件中通过provide来提供变量，在子组件中通过inject来注入变量。return {reload: this.reload}},data() {return {isRouterAlive: true // 控制视图是否显示的变量}},methods: {reload() {this.isRouterAlive = false // 先关闭，this.$nextTick(function() {this.isRouterAlive = true // 再打开})}}
}
</script>

声明reload，控制router-view的隐藏显示

index.vue
页面用inject注入reload方法

name: 'Deal',components: { pagination, crudOperation, rrOperation, udOperation, billWayForm, sfbillWayForm, approval, approvalInfo },mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],//重点看这里inject: ['reload'],//重点看这里data() {}

reBack(finBillNo) {this.$confirm('此操作将执行撤回, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消'}).then(() => {toReback(finBillNo).then(res => {// console.log(res)this.$message({type: 'success',message: '撤回成功!'})////像这样直接reload引用即可//this.reload()})}).catch(() => {this.$message({type: 'info',message: '已取消撤回'})})},

vue刷新当前页面--provide / inject 用法相关推荐

vue3 刷新当前页面(provide,inject)
vue3 实现刷新当前页面用这种方法可以实现,但效果很差,白屏时间很长,自己试一下就知道了. location.reload() 那么我们怎么做呢,别着急,马上看重点: 首先去我们的App.vue里 ...
最实用的vue刷新当前页面，provide / inject 组合方式实现vue页面刷新
这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种方式:provide / inject 组合方式实现vue页面刷新 1.修改 ...
浅析provide/inject用法、响应式、全局传递
前言 Vue的父子间传值 : props 爷孙或者更深嵌套的组件间传值: provide/inject 更复杂的结构:vuex provide/inject 提供/注入 provide 一个对象或返回 ...
Vue组件通讯方式 provide/inject 介绍以及使用场景
文章目录 vue的通讯方式 provide / inject的缺点使用办法代码案例展示一(provide字符串) 代码案例展示二(provide返回一个方法,并且方法返回字符串) vue的通讯方式 ...
vue 刷新当前页面、组件；provide、inject
provide.inject 最外层组件(祖先组件)向其所有子组件注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效:通过在App.vue,声明reload方法,控制router- ...
Vue刷新当前页面几种方式
问题: 最近些日子项目中突然碰到了一个需求,再完成编辑操作之后需要进行页面刷新,通过实验有如下几种姿势可以解决需求中的问题,下面进行简单总结如下. 姿势一:this.$router.go(0) 这个姿 ...
vue刷新当前页面，不留白
用provide / inject 组合原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效在App.vue,声明reload方法,控制ro ...
Vue刷新组件,页面刷新
通过:provide / inject 方式实现! Home.vue <keep-alive :include="tagsList" v-if="showView& ...
vue 刷新当前页面
1.首先在app.vue页面加入以下代码: 2.在需要刷新的页面 .

vue刷新当前页面--provide / inject 用法

vue刷新当前页面--provide / inject 用法相关推荐

最新文章

热门文章