应用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页面刷新的资料请关注脚本之家其它相关文章！
相关文章
证件图片识别上传根据业务需要，经常涉及到证件上传，例如身份证上传、银行卡、营业执照等信息，根据设计师的设计，单独封装了一个上传组件，这篇文章主要介绍了vue3 证件识别上传组件封装,需要的朋友可以参考下2023-05-05
vue+webpack 打包文件 404 页面空白的解决方法
下面小编就为大家分享一篇vue+webpack 打包文件 404 页面空白的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
本文主要介绍了Vue3中使用styled-components的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-05-05
这篇文章主要介绍了全面介绍vue 全家桶和项目实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了vue富文本框（插入文本、图片、视频）的使用及问题小结,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了Vue.js添加组件操作,结合实例形式分析了vue.js组件的注册、调用相关操作技巧,需要的朋友可以参考下2018-06-06
优化Vue template中大量条件选择v-if的方案分享
本文我们将给大家详细的讲解一下如何优化Vue template 中的大量条件选择v-if,文中通过代码示例介绍的非常详细,有详细的优化方案,感兴趣的朋友可以参考阅读下2023-07-07
这篇文章主要介绍了Vue实现剪贴板复制功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue组件打包并发布到npm的全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了Vue.js实现分页查询功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
最新评论