精华内容
下载资源
问答
  • vue局部组件刷新

    千次阅读 2020-08-10 18:00:47
    对此我的解决方法是导入成功之后,局部刷新列表组件,原理控制路由的显示隐藏(v-if),由路由的显示隐藏达到组件重新渲染的效果。 首先:我们在App.vue中,定义一个变量(isRouterAlive)为true,控制路由的显示隐藏,...

    背景: UI框架:antd vue,一个导入文件的功能,导入成功之后列表页的数据就会改变,但是我这边导入成功之后,打印的数据是更新了,页面却没有更新…
    对此我的解决方法是导入成功之后,局部刷新列表组件,原理控制路由的显示隐藏(v-if),由路由的显示隐藏达到组件重新渲染的效果。
    首先:我们在App.vue中,定义一个变量(isRouterAlive)为true,控制路由的显示隐藏,然后定义一个方法(reload),调用该方法之后组件重新刷新,然后必须要将这个方法定义在provide注入依赖,其子孙都可以用这个属性
    代码如下:

    <template>
        <div id="app">
          <router-view v-if="isRouterAlive"/>
        </div>
    </template>
    
    <script>
    export default {
      provide () {
        return {
          reload: this.reload
    
        }
      },
      data () {
        return {
          isRouterAlive: true
        }
      },
      methods: {
        reload () {
          this.isRouterAlive = false
          this.$nextTick(function () {
            this.isRouterAlive = true
          })
        }
      }
    }
    </script>
    <style>
      #app {
        height: 100%;
      }
    </style>
    
    
    

    然后:在需要局部刷新的页面调用inject: [‘reload’],在导入成功之后再调一遍数据,后加入this.reload()就可以实现了
    代码图片截图如下:
    在这里插入图片描述

    在这里插入图片描述

    并且你获取数据需要使用async 和await ,只有将数据加载完之后在掉reaload方法才能有效,然后就可以实现导入成功时候,页面页刷新了。

    展开全文
  • vue 实现局部组件刷新

    千次阅读 2021-01-07 17:29:14
    vue 项目里想实现组件局部刷新,我用到过的方法整理了一下: 1、 provide / indect 方法 使用 v-if 方法来控制 router-view 的显示隐藏 在 App.vue 页面 <template> <div id="app"> <router-...

    在 vue 项目里想实现组件的局部刷新,我用到过的方法整理了一下:

    1、 provide / inject 方法

    使用 v-if 方法来控制 router-view 的显示隐藏
    在 App.vue 页面

    <template>
      <div id="app">
        <router-view v-if="isActive"/>
      </div>
    </template>
    <script>
    export default {
    	name: 'App',
    	provide(){
    		return {
    	      reload: this.reload;
    	    }
    	},
    	data(){
    		isActive:true
    	},
    	method:{
    		reload(){
    			this.isActive = false;
    			this.$nextTick(() => ){
    				this.isActive  = true;
    			}
    		}
    	}
    }
    </script>
    

    然后再用到的页面引入,然后使用

    export default {
    	inject:['reload'],
    	method:{
    		refresh(){
    			this.reload();
    		}
    	}
    }
    </script>
    
    2、利用 v-if 直接操作组件
    <div v-if='isShow'> ...... <div>
    export default {
    	data(){
    		isShow:true
    	},
    	method:{
    		refresh(){
    			this.isShow = false;
    			this.$nextTick(() => ){
    				this.isShow = true;
    			}
    		}
    	}
    }
    </script>
    
    3、利用 key 值的变化触发组件更新

    vue 的虚拟 DOM 算法在比对 Vnode时会用到 key 作为唯一标识,key 值变了该元素就会被重新渲染。

    <div :key='keyNum'> ...... <div>
    export default {
    	data(){
    		keyNum:0
    	},
    	method:{
    		refresh(){
    			this.keyNum++;
    		}
    	}
    }
    </script>
    
    展开全文
  • Vue局部刷新组件

    2021-01-17 19:58:05
    vue局部刷新组件,可以使用provide/inject方法,在App.vue中添加刷新方法,路由初始状态是显示的 1、在template中添加的内容 <template> <router-view v-if="isRouterAlive"></router-view>...

    内容

    vue中局部刷新组件,可以使用provide/inject方法,在App.vue中添加刷新方法,路由初始状态是显示的

    1、在template中添加的内容

    <template>
        <router-view v-if="isRouterAlive"></router-view>
    </template>

    2、在script中添加的内容

    <script>
    export default {
      provide () {
        return {
          reload: this.reload
        }
      },
      data () {
        return {
          isRouterAlive: true
        }
      },
      methods: {
        reload () {
          this.isRouterAlive = false
          this.$nextTick(function () {
            this.isRouterAlive = true
          })
        }
      }
    }
    </script>

    3、在需要的地方调用

    export default {
      inject: ['reload'],
      data () {
          ...
              
      },
      methods: {
        select(){
            this.reload();
        }
    }
    </script>

    说明:在离开本页面的时候调用刷新方法,然后跳转页面

    展开全文
  • vue项目中实现局部组件刷新

    万次阅读 热门讨论 2019-04-25 16:11:46
    vue局部组件刷新,可以使用provide / inject方法,在App.vue中添加刷新方法,路由初始状态是显示的 <template> <router-view v-if="isRouterAlive"></router-view> </template> &...

    vue中局部组件刷新,可以使用 provide / inject方法,在App.vue中添加刷新方法,路由初始状态是显示的

    <template>
    
    <router-view v-if="isRouterAlive"></router-view>
    
    </template>
    
    
    
    <script>
    
    export default {
      provide () {
        return {
          reload: this.reload
        }
      },
      data () {
        return {
          isRouterAlive: true
        }
      },
      methods: {
        reload () {
          this.isRouterAlive = false
          this.$nextTick(function () {
            this.isRouterAlive = true
          })
        }
      }
    }
    </script>

    在需要的组件中引入并在需要的地方调用:

     

     

     

     

     

    展开全文
  • vue 中如何对局部组件强制刷新

    千次阅读 2020-12-09 16:25:08
    vue 中如何对局部组件强制刷新1.使用this.$forceUpdate强制重新渲染2.使用v-if指令 使用vue进行开发时,如果要刷新当前路由,则调用router.go(0)方法即可。但是某些情况下,我们可能要求仅仅刷新某个组件,而不是...
  • Vue组件局部刷新

    2021-05-26 13:32:26
    1.序言 (1)provide与inject 在实现组件局部刷新之前先来说一说provide与inject方法。 provide是放在最上层的页面,可以实现传数据给它的子组件和多重孙...2.provide与inject实现VUE组件局部刷新 首先在app.vue.
  • 使用vue进行开发时,如果要刷新当前路由,则调用router.go(0)方法即可。但是某些情况下,我们可能要求仅仅刷新某个组件,而不是路由,那么我们应该怎么做呢? 1.使用this.$forceUpdate()强制重新渲染 如果要在组件...
  • 我们在用element组件的时候,总会遇到页面内某个组件不能刷新的情况 举个例子: 这时不保存,关闭父组件页面,再打开后发现组件1中添加的内容还在.我们不想让组件1的新增的内容存在。 解决办法: 在父组件的调用...
  • Vue实现组件局部刷新

    千次阅读 2020-05-28 15:46:08
    Vue实现组件局部刷新通过v-if Vue中我们不可避免的需要调用来自各个方面的组件:奇奇怪怪的组件增加了! 这个时候有个问题:我从后端传来的数据给组件渲染,然而组件却没有更新! 恼火,难道我只能刷新网页才能...
  • 1. 在需要局部刷新组件上,加上v-if = "show" ,show的默认值为 true , 这样第一次渲染页面时,该组件能正常显示 2. 在点击事件中,先将 show 变为 false ,然后在 this.$nextTick 中将 show 变为 true , 这样便...
  • vue局部定时刷新

    2020-06-16 17:11:38
    定时刷新一般都会想到定时器,vue局部定时刷新如下: 一、设置定时器 timer: "",//定时器 //定时器刷新待办事项 this.timer = setInterval(() => { self.reload(); }, 1000); 二、局部刷新 <div class...
  • vue局部刷新

    2019-12-13 18:44:07
    vue局部刷新是对数据修改了或者删除了等操作,数据应该显示咱们操作后的状态的,但是重新请求axios是非常消耗内存的,此时应该是组件的局部刷新,那么如何实现vue组件的局部刷新呢?以下讲述了方法,希望可以帮助到...
  • vue实现局部刷新

    千次阅读 2020-03-09 16:06:47
    情况一、 原生或jquery项目中引入vue.js时的局部刷新 // html <tr v-for="(OrderItem,index) in OrderList" v-if="alive"> ... <td> <span v-if="!OrderItem.isState" buttonCode="CONFIRM" @...
  • (1)首先引入这个组件 (2)在data中定义一个空的timer (3)接着在触发一个事件之后去进行局部组件刷新 这样就可以进行组件刷新
  • VUE实现页面局部刷新

    千次阅读 2020-10-23 15:56:10
    vue实现页面刷新 在我的页面里有使用过三种页面刷新的方法,接下来挨个介绍下: 一、当前窗口刷新 window.location.reload() //页面刷新 二、路由切换方式 this.$router.push("需要刷新的页面地址"); //页面刷新 ...
  • vue局部刷新页面的三种方法

    千次阅读 2020-02-20 16:00:14
    方法一: location.reload(); 方法二: this.$router.go(0);...在App.vue中 <template> <router-view v-if="isRouterAlive"/> </template> <script> export default...
  • vue局部刷新数据

    2020-02-13 22:54:22
    可以直接在需要刷新的地方直接调用后台接口的相关函数,刷新数据,优点是速度比较快,不会出现闪白的现象,但是这样做会非常浪费流量,同时接口函数的调用也会使得代码逻辑变乱,可读性减低。 方案二 使用provide/...
  • 解决 – 强制刷新组件 给点击时间里面加上强制刷新组件的代码,如下 //methods中方法 handleCreate ( row ) { this . isShow = false //销毁组件 this . $nextTick ( ( ) => { this . ...
  • 场景: 一个群发消息列表(数组) ...1、定位确定采用局部刷新 2、进入消息列表请求获取列表数据的接口,完成发送的消息不需显示完成状态 3、正在发送的消息首次渲染时就调用setTimeout轮询刷新当前消息的...
  • vue中实现局部刷新

    千次阅读 2019-08-06 16:04:00
    vue局部组件刷新,可以使用provide / inject方法,在App.vue中添加刷新方法,路由初始状态是显示的 在需要的组件中引入并在需要的地方调用: 原文连接 :...
  • Vue对比传统模板渲染实现局部刷新

    千次阅读 2018-12-21 21:05:11
    一、dom局部刷新流程 请求后台数据(一般用Ajax)。 将数据加载到template模板。 将模板渲染输出的html结果放到需要刷新的dom节点中。...二、Vue实现局部刷新 请求后台数据。 无需进行模板渲染,...
  • 然后再导入Loading组件。并设置startLoading和endLoading两个函数,作用就是如函数名所示了。 import axios from 'axios' import { Message, Loading } from 'element-ui' let loading function startLoading...
  • 主要介绍了通过vue刷新左侧菜单栏操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向...
  • Vue下拉刷新组件

    千次阅读 2019-02-02 15:17:15
    比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。 下拉刷新原理: ...
  • 关于VueRouter的局部刷新的问题 最近自己在做一个Vue+ElementUI的后台管理系统Demo,首页如下图,点击左侧菜单的时候,右侧主区域无法局部刷新而是整个页面全局刷新了。
  • 1.vue2.0为例,在App.vue文件中写 <template> <div id="app"> <!--<img src="./assets/logo.png">--> <router-view v-if="isRouteAlive"/> </div> </template&g...
  • 现在我的App.vue里面有一个头部的公共组件,头部组件里有一个输入框,当我输入词条时,将词条传进App.vue里的里的.vue页面,并进行查询获取数据 解决思路如下: 1.如何拿到头部的词条 2.当词条改变时如何触发.vue里...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,707
精华内容 2,282
关键字:

vue局部组件刷新

vue 订阅