vue 中緩存組件刷新問題

一.頁面層級的組件刷新

 1. 首先在路由中添加keepAlive:true

{
    path: '/login',
    component: (resolve) => require(['@/views/login'], resolve),
    hidden: true,
    meta: {keepAlive:true}
  },

2.在vue組件<template>標簽中添加v-if="$route.meta.keepAlive" 

<keep-alive :include="cachedViews">
   <router-view :key="key" v-if="$route.meta.keepAlive" />
</keep-alive>

3.在需要刷新的組件中添加activated中添加需要刷新的方法

mounted(){
    this.queryParams.mainWidth=this.$refs.tableRef.bodyWidth

  },
activated() {
   this.getList();
},

二.子組件的刷新

1.注：所有的代碼都在父組件寫

頁面代碼添加CaseOperation是子組件，sonRefresh定義刷新用的參數

<CaseOperation :userDataRow="caseIdObj" :userObj="userObj" ref="caseOperation" v-if="sonRefresh" />

2.JS中添加在操作的函數中添加代碼

data() {
    return {
      sonRefresh:true
   }
}，
methods: {
    handleClick2(){
        this.sonRefresh= false;
        this.$nextTick(() => {
            this.sonRefresh= true; });
    },
}

三.不相關的組件間刷新

  1.首先創建一個空的JS ，callUtils.js

import Vue from 'vue'
export default new Vue

2.引入，在一個函數中添加發送$emit

import callUtils from "@/utils/callUtils.js"

callUtils.$emit('tiaojiejilu')

3.在需要刷新的組件中執行，當然需要引入

import callUtils from "@/utils/callUtils.js"

 callUtils.$on('tiaojiejilu',()=>{
        //這里面添加需要執行的函數
});