zoukankan      html  css  js  c++  java
  • 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',()=>{
            //这里面添加需要执行的函数
    });
  • 相关阅读:
    ruby 学习笔记 2 -变量
    sharepoint获取用户属性
    读取Sql Server数据库数据
    更新SQL Server数据库数据
    客户端开发添加sharepoint凭证
    设置Log记录
    C#发送邮件
    echarts饼状图
    提升工作流权限,打开designer的App step功能
    echars折柱混合
  • 原文地址:https://www.cnblogs.com/binmengxue/p/14207928.html
Copyright © 2011-2022 走看看