Vue怎样刷新当前的页面（provide / inject刷新当前页面）

最新推荐文章于 2024-07-26 18:35:26 发布

zql_ll

最新推荐文章于 2024-07-26 18:35:26 发布

阅读量2.1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41994549/article/details/83788887

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。
这种方式可以避免在使用props传值时，必须将每一个属性都传递给子组件的写法，当使用的公共组件不确定会被传递什么值的时候，使用这种写法非常方便。

在父组件中APP.Vue中
<template>
  <div id="app" style="height:100%;">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

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



在子组件中注入父组件中的变量在data（）之前注入


inject:['reload'],


在哪里引用就调用


this.reload()