vue中this.$refs.tabs.refreshs()刷新組件的方法

本文小編為大家詳細介紹“vue中this.$refs.tabs.refreshs()刷新組件的方法”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue中this.$refs.tabs.refreshs()刷新組件的方法”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

this.$refs.tabs.refreshs()刷新組件

當更改了用戶信息后，需要刷新頁面或者組件。

第一種：當前組件刷新

定義一個請求用戶信息的方法，在需要時調用：

sessionStorage.setItem(‘userInfo‘,JSON.stringify(this.userInfo)); //從session緩存中獲取

第二種：刷新父組件時

子組件某個需要的地方：   

this.$emit(‘refresh‘);

父組件：

methods:{
     refresh() {
            this.userInfo = JSON.parse(sessionStorage.getItem(‘userInfo‘));
     }
},

第三種：非關系組件

父組件：

<template>
   <top-bar ref="tabs"/>   //需要刷新的組件（非關系組件）
</template>
methods:{
    refresh() {
        this.$refs.tabs.refreshs();  //刷新子組件 ，top-bar是vue組件實例的名字 ,tabs時引用的名字,refreshs是Vue自帶的方法
    }
},

vue組件重新加載（刷新）

方法：利用v-if控制router-view，在根組件APP.vue中實現一個刷新方法

<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()

如何刷新當前組件

公用內容動態改變了全局參數，要求切換后刷新當前組件所有請求，或重新加載當前組件。

因為我們在項目中加入了vue-routerapp.vue，就可以通過控制router-view去達到我們需求的效果。

同時也要用到 provide/inject，個人列表類似vuex的輔助函數，跨越層級關系引入（注入）你的某個方法。

app.Vue

<template>
  <div id="app" v-loading.fullscreen.lock="fullscreenLoading"  element-loading-spinner="rybloading" element-loading-text="正在請求數據" 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>

然后在你修改全局參數的組件中加入

data(){
	return{
		
	}
},
inject:['reload'], // 在這個組件中注入這個方法
//...事件中調用
methods:{
	changed(){
		this.reload() //調用
	}
}

讀到這里，這篇“vue中this.$refs.tabs.refreshs()刷新組件的方法”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。