應用provide與inject重新整理Vue頁面方法
阿新 • • 發佈:2021-09-25
目錄
- 方法1:直接呼叫函式
- 方法2:kPTDIaby採用provide / inject(靜重新整理)
- 優勢比較
方法1:直接呼叫函式
將整個頁面過載,以下兩種都可以
1.window.location.reload()
2.this.$router.go()
方法2:採用provide / inject(靜重新整理)
在高階函式中宣告一個reload重新整理函式
<template>
<div id="app" v-if="show"></div>
</template&gkPTDIabyt;
<script>
export default {
// 控制顯示/隱藏,實現重新整理
data () {
return {
show: true
}
},// 把重新整理的方法傳給低階元件
provide () {
return {
reload: this.reload
}
},methods: {
// 高階元件定義重新整理方法
reload () {
this.bol = false
this.$nextTick(() => {
this.bol = true
})
}
}
}
</script>
在低階元件中www.cppcns.com使用重新整理函式
<template> <div></div> </template> <script> export default { inject: ['reload'],methods: { // 低階元件,重新整理 fun () { this.reload() } } } </script>
優勢比較
方法1中直接呼叫函式,會導致整個重新整理,會浪費效能些,使用者體驗也不好; 大型網站這樣重新整理下,需要等幾秒瀏覽器左上角可以看到重新整理的動畫;
方法2中採用provide / inject,使用者不會感覺到重新整理,而且重新整理的頁面內容範圍可控制,相對浪費效能會少很多
以上就是應用provide與inject重新整理頁面方法的詳細內容,更多關於Vue頁面刷新的資料請關注我們其它相關文章!