Vue 实现组件的强制刷新

前言

在vue 开发中,出于各种目的,我们常常需要让组件重新加载渲染。接下来,我们就讲讲强制组件刷新的方法。

方法一:v-if

对于v-if 的使用,我们常用在子组件显示上。我们查看文档时,会发现它常常被用于与v-show 的比较。对于经常性加载的组件,显示方式应该使用v-show 来实现组件的显示。为什么呢?因为当 v-if = ‘false’ 时,子组件是会被卸载的。当它重新 v-if = ‘true’ 时,它需要重新跑一遍生命周期的进程。而 v-show 仅是让子组件隐藏了而已。所以,使用v-show 并不用重新跑一遍生命周期。这样对系统资源的花销就比较小了。故而,对于经常性加载的组件建议使用 v-show 来实现显示/隐藏,节省系统花销。
基于上面理论,我们知道了v-if 会让组件重新渲染。这不就是组件刷新吗?所以,我们就可以借组v-if 实现组件的强制刷新。

实现原理:通过v-if 来控制组件的显示/隐藏。

1、我们可以在父组件设置一个变量用于存放子组件显示/隐藏的状态(state)。

<template>
  <div>
   <child v-if='state'></child>
  </div>
</template>
<script>
import child from './child'
export default {
  name: "parent",
  data() {
    return {
      state: false
    };
  },
  components:{
    child:child
  }
};
</script>

2、然后我们通过设置方法来控制显示和隐藏。

 methods: {
    isShow: function() {
      this.state = true;
    },
    isHidde: function() {
      this.state = false;
    }

当触发 isShow 方法时,组件就加载渲染。当触发 isHidden 方法时,组件就卸载隐藏。当下次再触发 isShow 方法时,组件就重新渲染加载了。这样就实现了组件的刷新。

如果想在子组件某个操作完成后就卸载该组件,那么可以在子组件中调用isHidden 实现。比如说子组件是confirm 框, 当用户点击“确定/取消”后想卸载该组件,那就在确定/取消事件里调用添加代码:

this.$parent.isHidde();

方法二:this.$forceUpdate()

上面是子组件的强制刷新方法。但有时候我们想直接对当前组件进行强制刷新操作,那该怎么办呢?我们可以调用this.$forceUpdate()可以强制当前组件刷新。

方法三::key=“value”

该方法和方法一非常相似,都是通过改变一个变量来实现组件的强制刷新。但要注意的是,只要当key的值改变,组件就会自动刷新,所以key的值可以是任何类型。而v-if 的值严格来说只能是true/false

发布了22 篇原创文章 · 获赞 3 · 访问量 1464
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览