應(yīng)用provide與inject刷新Vue頁面方法
更新時間：2021年09月24日 11:34:09 作者：SpringSir
這篇文章主要介紹了應(yīng)用provide與inject刷新Vue頁面的兩種方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，多多進步，祝大家早日升職加薪
方法1：直接調(diào)用函數(shù)
將整個頁面重載, 以下兩種都可以
1.window.location.reload()
2.this.$router.go()
方法2：采用provide / inject(靜刷新)
在高階函數(shù)中聲明一個reload刷新函數(shù)
<template>
<div id="app" v-if="show"></div>
</template>
<script>
export default {
// 控制顯示/隱藏, 實現(xiàn)刷新
data () {
return {
show: true
}
},
// 把刷新的方法傳給低階組件
provide () {
return {
reload: this.reload
}
},
methods: {
// 高階組件定義刷新方法
reload () {
this.bol = false
this.$nextTick(() => {
this.bol = true
})
}
}
}
</script>
在低階組件中使用刷新函數(shù)
<template>
<div></div>
</template>
<script>
export default {
inject: ['reload'],
methods: {
// 低階組件, 刷新
fun () {
this.reload()
}
}
}
</script>
優(yōu)勢比較
- 方法1中直接調(diào)用函數(shù), 會導(dǎo)致整個網(wǎng)站刷新，會浪費性能些，用戶體驗也不好; 大型網(wǎng)站這樣刷新下，需要等幾秒瀏覽器左上角可以看到刷新的動畫;
- 方法2中采用provide / inject, 用戶不會感覺到刷新, 而且刷新的頁面內(nèi)容范圍可控制, 相對浪費性能會少很多
以上就是應(yīng)用provide與inject刷新Vue頁面方法的詳細內(nèi)容，更多關(guān)于Vue頁面刷新的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了正確更改Ant?Design?of?Vue樣式的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在?Vue.js?中,組件通信是開發(fā)過程中非常重要的一部分,它涉及到不同組件之間的數(shù)據(jù)傳遞和交互,本文將介紹如何實現(xiàn)父子組件之間的有效通信,并盤點了常見的5種Vue組件通信方式總結(jié),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了nuxt中刷新頁面后防止store值丟失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue demo實現(xiàn)商品列表的展示，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Element?Plus?去掉表格外邊框的實現(xiàn)代碼
使用el-table組件拖拽時,?想使用自定義樣式進行拖拽,?想去掉外邊框,?并在表頭加入豎杠樣式,本文給大家介紹Element?Plus?去掉表格外邊框的實現(xiàn)代碼,感興趣的朋友一起看看吧2025-04-04
解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題
今天小編就為大家分享一篇解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題。具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue3中給數(shù)組賦值丟失響應(yīng)式的解決方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vite的原理，Vite是一個更輕、更快的web應(yīng)用開發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項目是一個普通的Vue3應(yīng)用，相比基于Vue-cli創(chuàng)建的應(yīng)用少了很多配置文件和依賴，下面基于Vite相關(guān)資料內(nèi)容，需要的朋友可以參考一下2022-02-02
在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總(推薦)
dhtmlxGantt一個功能豐富的甘特圖插件，支持任務(wù)編輯，資源分配和多種視圖模式，這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總,需要的朋友可以參考下2023-03-03
俄羅斯方塊這個游戲相信大家都玩過,下面這篇文章主要給大家介紹了關(guān)于如何利用vue3實現(xiàn)一個俄羅斯方塊的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01