应用provide与inject刷新Vue页面方法
更新时间：2021年09月24日 11:34:09 作者：SpringSir
这篇文章主要介绍了应用provide与inject刷新Vue页面的两种方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，多多进步，祝大家早日升职加薪
方法1：直接调用函数
将整个页面重载, 以下两种都可以
1.window.location.reload()
2.this.$router.go()
方法2：采用provide / inject(静刷新)
在高阶函数中声明一个reload刷新函数
<template>
<div id="app" v-if="show"></div>
</template>
<script>
export default {
// 控制显示/隐藏, 实现刷新
data () {
return {
show: true
}
},
// 把刷新的方法传给低阶组件
provide () {
return {
reload: this.reload
}
},
methods: {
// 高阶组件定义刷新方法
reload () {
this.bol = false
this.$nextTick(() => {
this.bol = true
})
}
}
}
</script>
在低阶组件中使用刷新函数
<template>
<div></div>
</template>
<script>
export default {
inject: ['reload'],
methods: {
// 低阶组件, 刷新
fun () {
this.reload()
}
}
}
</script>
优势比较
- 方法1中直接调用函数, 会导致整个网站刷新，会浪费性能些，用户体验也不好; 大型网站这样刷新下，需要等几秒浏览器左上角可以看到刷新的动画;
- 方法2中采用provide / inject, 用户不会感觉到刷新, 而且刷新的页面内容范围可控制, 相对浪费性能会少很多
以上就是应用provide与inject刷新Vue页面方法的详细内容，更多关于Vue页面刷新的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了正确更改Ant Design of Vue样式的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
在 Vue.js 中,组件通信是开发过程中非常重要的一部分,它涉及到不同组件之间的数据传递和交互,本文将介绍如何实现父子组件之间的有效通信,并盘点了常见的5种Vue组件通信方式总结,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了nuxt中刷新页面后防止store值丢失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue demo实现商品列表的展示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
使用el-table组件拖拽时, 想使用自定义样式进行拖拽, 想去掉外边框, 并在表头加入竖杠样式,本文给大家介绍Element Plus 去掉表格外边框的实现代码,感兴趣的朋友一起看看吧2025-04-04
今天小编就为大家分享一篇解决vue-cli项目打包出现空白页和路径错误的问题。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue3中给数组赋值丢失响应式的解决方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vite的原理，Vite是一个更轻、更快的web应用开发工具，面向现代浏览，Vite创建的项目是一个普通的Vue3应用，相比基于Vue-cli创建的应用少了很多配置文件和依赖，下面基于Vite相关资料内容，需要的朋友可以参考一下2022-02-02
在 Vue 中使用 dhtmlxGantt 组件时遇到的问题汇总(推荐)
dhtmlxGantt一个功能丰富的甘特图插件，支持任务编辑，资源分配和多种视图模式，这篇文章主要介绍了在 Vue 中使用 dhtmlxGantt 组件时遇到的问题汇总,需要的朋友可以参考下2023-03-03
俄罗斯方块这个游戏相信大家都玩过,下面这篇文章主要给大家介绍了关于如何利用vue3实现一个俄罗斯方块的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
最新评论