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',()=>{
        //这里面添加需要执行的函数
});