vue關(guān)于this.$refs.tabs.refreshs()刷新組件方式
更新時間：2022年03月25日 14:30:59 作者：master_zhong
這篇文章主要介紹了vue關(guān)于this.$refs.tabs.refreshs()刷新組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
this.$refs.tabs.refreshs()刷新組件
當(dāng)更改了用戶信息后，需要刷新頁面或者組件。
第一種：當(dāng)前組件刷新
定義一個請求用戶信息的方法，在需要時調(diào)用：
sessionStorage.setItem(‘userInfo‘,JSON.stringify(this.userInfo)); //從session緩存中獲取
第二種：刷新父組件時
子組件某個需要的地方：
this.$emit(‘refresh‘); ?
父組件：
methods:{
? ? ?refresh() {
? ? ? ? ? ? this.userInfo = JSON.parse(sessionStorage.getItem(‘userInfo‘));
? ? ?}
},第三種：非關(guān)系組件
父組件：
<template>
? ?<top-bar ref="tabs"/> ? //需要刷新的組件（非關(guān)系組件）
</template>
methods:{
? ? refresh() {
? ? ? ? this.$refs.tabs.refreshs(); ?//刷新子組件 ，top-bar是vue組件實(shí)例的名字 ,tabs時引用的名字,refreshs是Vue自帶的方法
? ? }
},vue組件重新加載（刷新）
方法：利用v-if控制router-view，在根組件APP.vue中實(shí)現(xiàn)一個刷新方法
<template>
?? ?<router-view v-if="isRouterAlive"/> ? ? //路由的組件
</template>
<script>
export default {
?data () {
? ?return {
? ? ?isRouterAlive: true
? ?}
?},
?methods: {
? ?reload () {
? ? ?this.isRouterAlive = false
? ? ?this.$nextTick(() => (this.isRouterAlive = true))
? ?} ??
?}
}
</script>然后其它任何想刷新自己的路由頁面，都可以這樣：
this.reload()
如何刷新當(dāng)前組件
公用內(nèi)容動態(tài)改變了全局參數(shù)，要求切換后刷新當(dāng)前組件所有請求，或重新加載當(dāng)前組件。
因?yàn)槲覀冊陧?xiàng)目中加入了vue-routerapp.vue，就可以通過控制router-view去達(dá)到我們需求的效果。
同時也要用到 provide/inject，個人列表類似vuex的輔助函數(shù)，跨越層級關(guān)系引入（注入）你的某個方法。
app.Vue
<template>
<div id="app" v-loading.fullscreen.lock="fullscreenLoading" element-loading-spinner="rybloading" element-loading-text="正在請求數(shù)據(jù)" element-loading-background="rgba(0, 0, 0, 0.6)">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'app',
provide() {
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload() {
this.isRouterAlive = false
this.$nextTick(function() {
this.isRouterAlive = true
})
}
}
}
</script>
<style lang="scss">
</style>
然后在你修改全局參數(shù)的組件中加入
data(){
return{
}
},
inject:['reload'], // 在這個組件中注入這個方法
//...事件中調(diào)用
methods:{
changed(){
this.reload() //調(diào)用
}
}
我在項(xiàng)目中的具體表現(xiàn)
通過切換期次，修改全局的請求參數(shù)，結(jié)合了Vuex，在下拉菜單所在的組件中注入app.vue中的方法，從而實(shí)現(xiàn)了目標(biāo)效果。
切換期次，重新加載當(dāng)前組件所有數(shù)據(jù)。
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3實(shí)現(xiàn)Message消息組件示例
在大多數(shù) web 產(chǎn)品中，全局的 Message 組件占有較大的使用場景，本文主要介紹了Vue3實(shí)現(xiàn)Message消息組件示例，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
mockjs是用來模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒有開發(fā)出來時獨(dú)立開發(fā)。這篇文章主要介紹了vue項(xiàng)目中mock.js的使用,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了使用vue-antd動態(tài)切換主題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-mugen-scroll組件實(shí)現(xiàn)pc端滾動刷新
這篇文章主要為大家詳細(xì)介紹了vue-mugen-scroll組件實(shí)現(xiàn)pc端滾動刷新，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
今天小編就為大家分享一篇Vue點(diǎn)擊切換顏色的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了基于vue 動態(tài)菜單 刷新空白問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue中實(shí)現(xiàn)methods一個方法調(diào)用另外一個方法
下面小編就為大家分享一篇vue中實(shí)現(xiàn)methods一個方法調(diào)用另外一個方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
下面小編就為大家分享一篇Vue2 模板template的四種寫法總結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了詳解Vue 動態(tài)組件與全局事件綁定總結(jié)，從示例中發(fā)現(xiàn)并解決問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue3(optionApi)使用Element Plus庫沒有效果的解決方式
這篇文章主要介紹了vue3(optionApi)使用Element Plus庫沒有效果的解決方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03