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();
   }
}
相关推荐
快起来搬砖了1 分钟前
实现一个优雅的城市选择器组件 - Uniapp实战
开发语言·javascript·uni-app
龙在天11 分钟前
vue 请求接口快慢 覆盖 解决方案
前端
可子是我的小猫20 分钟前
【JS】模块(一)
javascript
跟橙姐学代码28 分钟前
Python 类的正确打开方式:从新手到进阶的第一步
前端·python·ipython
Jagger_28 分钟前
SonarQube:提升代码质量的前后端解决方案
前端·后端·ai编程
Becauseofyou13732 分钟前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
菜市口的跳脚长颌32 分钟前
前端大文件上传全攻略(秒传、分片上传、断点续传、并发控制、进度展示)
前端
不一样的少年_34 分钟前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
草履虫建模39 分钟前
在 RuoYi 中接入 3D「园区驾驶舱」:Vue2 + Three.js + Nginx
运维·开发语言·javascript·spring boot·nginx·spring cloud·微服务
云枫晖42 分钟前
JS核心知识-数据转换
前端·javascript