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();
   }
}
相关推荐
brzhang7 分钟前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构
三巧17 分钟前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
SummerGao.19 分钟前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
软件技术NINI35 分钟前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码
javascript·css·html
天天扭码1 小时前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪1 小时前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&1 小时前
css word
前端·css
Мартин.1 小时前
[Meachines] [Hard] CrimeStoppers LFI+ZIP-Shell+Firefox-Dec+DLINK+rootme-0.5
前端·firefox
冰镇生鲜1 小时前
快速静态界面 MDC规则约束 示范
前端
技术与健康1 小时前
【解读】Chrome 浏览器实验性功能全景
前端·chrome