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

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

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

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

第一種：當前組件刷新

定義一個請求用戶信息的方法，在需要時調(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組件實例的名字 ,tabs時引用的名字,refreshs是Vue自帶的方法
    }
},

vue組件重新加載（刷新）

方法：利用v-if控制router-view，在根組件APP.vue中實現(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()

如何刷新當前組件

公用內(nèi)容動態(tài)改變了全局參數(shù)，要求切換后刷新當前組件所有請求，或重新加載當前組件。

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

同時也要用到 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)用
	}
}

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