vue中使用provide-inject,实现刷新页面

vue中父组件给子和孙组件插入一个依赖，使其能传递关系。

文档

这里先做一个简单的实例，

在app.vue中：

<script>
export default {
  name:"App",
  components:{
    
  },
  provide:{
    message:'来自父组件的消息！'
  }
}
</script>

在其中的一个路由中：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    {{message}}
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  inject:['message'],
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

那么最终的显示效果为：

这里显示出了app.vue页面传递过来的信息。

在网站操作中，对数据进行了增删改操作之后，希望重新加载一下当前页面，也可以使用provide-inject。

在app.vue中：

<router-view v-if="isRouterHide" />

<script>
export default {
  name: "App",
  // 父组件中返回要传给下级的数据，来实现点同一路由刷新
  provide() {
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      isRouterHide: true
    };
  },
  methods: {
    reload() {
      this.isRouterHide = false;
      this.$nextTick(function() {
        this.isRouterHide = true;
      });
    }
  }
};
</script>

在子组件中：

<script>
export default {
  inject: ["reload"],
  mounted() {
    let that = this;
    //页面加载时请求数据
    //请求数据的代码
  },
  methods: {
    // 操作事件
    handleAllSend: function() {
      let that = this;
      //显示遮罩层，使用的elementUI
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      that.$axios
        .post("https://www.接口/very", {
          orderList: that.参数
        })
        .then(body => {
          //隐藏遮罩层
          loading.close();
          //调用事件，重新加载！
          that.clickDiv();
          alert("批量操作ok！！！");
        })
        .catch(error => {
          console.log(error);
        });
    },
    clickDiv() {
      console.log('事件后，调用重新加载！');
      this.reload();
    }
  }
  }
</script>