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

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();
   }
}
相关推荐
ohMyGod_12322 分钟前
用React实现一个秒杀倒计时组件
前端·javascript·react.js
eternal__day26 分钟前
第三期:深入理解 Spring Web MVC [特殊字符](数据传参+ 特殊字符处理 + 编码问题解析)
java·前端·spring·java-ee·mvc
醋醋32 分钟前
Vue2源码记录
前端·vue.js
艾克马斯奎普特33 分钟前
Vue.js 3 渐进式实现之响应式系统——第四节:封装 track 和 trigger 函数
javascript·vue.js
敲代码的玉米C40 分钟前
Vue Draggable 深入教程:从配置到实现的完整指南
vue.js
frontDeveloper43 分钟前
Vue3基础使用概览
vue.js
江耳44 分钟前
从10秒到无限流:我用Vercel+NextJS实现AI流式对话遇到的超时问题及解决方案
前端
总之就是非常可爱1 小时前
三分钟让你看懂alien-signals computed基本原理
前端
frontDeveloper1 小时前
Vue2基础原理概览
vue.js
frontDeveloper1 小时前
Vue2基础使用概览
vue.js