Vue刷新局部数据的方法

今天在写项目时遇到上传头像后头像没有相应更新的问题，因为上传头像只是将头像上传到云端和数据库，虽然vue具有响应式更新的特性，但这种情况下vm层数据没有更新，页面也就不会响应更新了。这时需要我们手动刷新。如果使用原始方法location.reload()则会造成闪烁，于是我们可以使用以下方法。

在App.vue定义reload方法

<template><div id="app"><router-view v-if="isRouterAlive"></router-view></div>
</template>
<script>export default {name: 'App',provide () {    //父组件通过provide来提供变量，在子组件中通过inject来注入变量                                       return {reload: this.reload                                              }},data() {return{isRouterAlive: true  //控制视图是否显示}},methods: {reload () {this.isRouterAlive = false;this.$nextTick(function () {this.isRouterAlive = true;}) }}，}
</script>

在需要刷新的组件注入该方法

export default {inject:['reload'], //注入App里的reload方法data () {return {.......}},

需要刷新时使用reload()方法

this.reload();

Vue刷新局部数据的方法相关推荐

android更新UI（界面）的方法；android刷新界面数据的方法；android定时器更新界面
Android中常常需要对UI界面进行更新.下面我将介绍的是定时更新UI的几种方法: 一.定时器更新UI的两种方法 1.使用Timer的方式 private Timer timer=new Timer ...
Clinet/Server在工作线程中刷新页面数据的方法
Worker线程不能修改UI线程的状态(比如文本框里面的内容).解决的办法是写一个用来更新文本框内容的函数,然后在Worker线程里面通过BeginInvoke来利用delegate调用这个函数更新文 ...
Vue删除数据成功后如何刷新表格数据
文章目录刷新表格数据的方法: 1.this.$router.go(0) 2.location.reload() 3.跳转空白页再跳回原页面 4.控制的显示隐藏(最实用的方法) 刷新表格数据的方法: ...
vue el-form鼠标事件导致页面刷新解决方案；vue 阻止多次点击提交数据通用方法...
一.阻止表单自动提交刷新页面:<el-form><el-form-item :inline="true" @submit.native.prevent>&l ...
vue组件穿方法_vue组件中的数据传递方法
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递.组件之间传递数据大致分为三种情况: 父组件向子组件传递数据,通过 props ...
Vue定时刷新页面数据
我现在只知道两种最常见的定时刷新方案,一种是利用Vue的内置函数setTimeout.setInterval定时执行,另一种是websocket消息推送.我的需求是,当数据库中的数据发生更新时,前端就 ...
【Vue】实现当前页面刷新的四种方法
目录前言方法一:location.reload 方法二:$router.go(0) 方法三:provide.inject和$nextTick 方法四:创建空白页前言这两周在写一个后台管理,每次 ...
vue刷新页面如何保证路由不变_vue 刷新之后嵌套路由不变重新渲染页面的方法...
vue 刷新之后嵌套路由不变重新渲染页面的方法解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 ...
【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
[vue]使用localStorage解决vuex在页面刷新后数据被清除的问题参考文章: (1)[vue]使用localStorage解决vuex在页面刷新后数据被清除的问题 (2)https:// ...

Vue刷新局部数据的方法

Vue刷新局部数据的方法相关推荐

最新文章

热门文章