欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue關于this.$refs.tabs.refreshs()刷新組件方式

 更新時間：2022年03月25日 14:30:59   作者：master_zhong  
這篇文章主要介紹了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中實現(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()

如何刷新當前組件

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

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

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

app.Vue

<template>
  <div id="app" v-loading.fullscreen.lock="fullscreenLoading"  element-loading-spinner="rybloading" element-loading-text="正在請求數(shù)據" 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'], // 在這個組件中注入這個方法
//...事件中調用
methods:{
	changed(){
		this.reload() //調用
	}
}

我在項目中的具體表現(xiàn)

通過切換期次，修改全局的請求參數(shù)，結合了Vuex，在下拉菜單所在的組件中注入app.vue中的方法，從而實現(xiàn)了目標效果。

切換期次，重新加載當前組件所有數(shù)據。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論