vue不刷新浏览器更新页面的方法

活宝小娜2024-11-23 1:38

vue不刷新浏览器更新页面的方法

通过provide/inject可以轻松实现跨级访问祖先组件的数据，使页面不刷新浏览器更新

provide和inject

一般写在App.vue，这样所有组件都可以用到

在App.vue中：

provide()将父组件中返回要传给下级的数据

javascript 复制代码

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

<script>
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>

<style lang="scss">

</style>

在要更新页面的组件中使用，写在methods同级。

在需要页面更新的地方直接用this调用即可，无需刷新页面

javascript 复制代码

inject:['reload'],
methods: {
   updatePage() {
      this.reload();
   }
}