Vue中组件局部刷新

vue 专栏收录该内容
6 篇文章 0 订阅

1.序言

(1)provide与inject

  在实现组件局部刷新之前先来说一说provide与inject方法。

  provide是放在最上层的页面,可以实现传数据给它的子组件和多重孙组件,只需要在子孙组件中用inject接收就可以了。

  (2)其他的方法实现页面刷新

this.$router.go(0);
location.reload();

  这两种方法都是强制刷新页面,会出现短暂的白屏闪烁,不推荐使用。

2.provide与inject实现VUE中组件局部刷新

首先在app.vue写入provide。

app.vue:

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

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

<style>
  *{
    padding: 0;
    margin: 0;
  }
</style>

在需要刷新的组件中用inject接收reload方法,然后调用,即可实现刷新。

export default {
  name: "mainBox",
  inject:["reload"],
  data() {
    return {}
  },
  methods:{
    updateData(){
        this.reload()
    }
  }
}

 

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值