广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >应用provide与inject刷新Vue页面方法
  • 235
分享到

应用provide与inject刷新Vue页面方法

2024-04-02 19:04:59 235人浏览 安东尼
摘要

目录方法1:直接调用函数方法2:采用provide / inject(静刷新)优势比较方法1:直接调用函数 将整个页面重载, 以下两种都可以 1.window.location.r

方法1:直接调用函数

将整个页面重载, 以下两种都可以

1.window.location.reload()

2.this.$router.Go()

方法2:采用provide / inject(静刷新)

在高阶函数中声明一个reload刷新函数


<template>
  <div id="app" v-if="show"></div>
</template>
<script>
export default {
  // 控制显示/隐藏, 实现刷新
  data () {
    return {
      show: true
    }
  },
  // 把刷新的方法传给低阶组件
  provide () {
    return {
      reload: this.reload
    }
  },
  methods: {
    // 高阶组件定义刷新方法
    reload () {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    }
  }
}
</script>

在低阶组件中使用刷新函数


<template>
  <div></div>
</template>
<script>
export default {
  inject: ['reload'],
  methods: {
    // 低阶组件, 刷新
    fun () {
      this.reload()
    }
  }
}
</script>

优势比较

  • 方法1中直接调用函数, 会导致整个网站刷新,会浪费性能些,用户体验也不好; 大型网站这样刷新下,需要等几秒浏览器左上角可以看到刷新的动画;
  • 方法2中采用provide / inject, 用户不会感觉到刷新, 而且刷新的页面内容范围可控制, 相对浪费性能会少很多

以上就是应用provide与inject刷新Vue页面方法的详细内容,更多关于Vue页面刷新的资料请关注编程网其它相关文章!

--结束END--

本文标题: 应用provide与inject刷新Vue页面方法

本文链接: https://www.lsjlt.com/news/136574.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 应用provide与inject刷新Vue页面方法
    目录方法1:直接调用函数方法2:采用provide / inject(静刷新)优势比较方法1:直接调用函数 将整个页面重载, 以下两种都可以 1.window.location.r...
    99+
    2022-11-12
  • Vue使用三种方法刷新页面
    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。 原始方法: loca...
    99+
    2022-11-12
  • vue中实现页面刷新以及局部刷新的方法
    目录一.全页面刷新二、局部刷新三、应用场景总结一.全页面刷新 1.修改 App.vue,代码如下: <template> <div id="app"> ...
    99+
    2022-11-12
  • Vue应用程序中怎么刷新页面
    Vue是一款流行的JavaScript框架,它是一个用于构建交互式Web应用程序的开发工具。Vue提供了许多有用的功能和工具,其中包括Vue Router。Vue Router是一个内置的路由管理器,它可以帮助开发者更好地管理Vue应用程序...
    99+
    2023-05-14
  • vue列表数据删除后主动刷新页面及刷新方法详解
    问题描述: 前端删除一条数据或者新增数据后,后端操作成功,但前端不会自动刷新,需要重新刷新当前页面 (用vue-router重新路由到当前页面,页面是不进行刷新的 ,采用windo...
    99+
    2022-11-12
  • vue/react单页应用后退不刷新方案
    目录引言 为什么麻烦 有坑的社区方案(以vue为例) 目前不错的方案 上效果图vue中的实现 react中的实现 题外 该方案的优点缺点 引言 前进刷新,后退不刷新,是一个类似ap...
    99+
    2022-11-12
  • Vue实现当前页面刷新的4种方法举例
    目录前言方法一:location.reload方法二:$router.go(0)方法三:provide、inject和$nextTick方法四:创建空白页总结前言 这两周在写一个后台...
    99+
    2023-05-18
    vue页面刷新方法 vue当前页面刷新 vue重新加载当前页面
  • Vue实现父子组件页面刷新的几种常用方法
    目录1、原地页面重新加载(不推荐)2、空白页面作为过渡3、使用Provide / Inject组合控制显示4、v-on:param父组件监听子组件事件参考文档:很多时候我们在操作过页...
    99+
    2022-11-13
  • vue中实现全页面或局部刷新的方法是什么
    今天就跟大家聊聊有关vue中实现全页面或局部刷新的方法是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。vue中怎么实现页面刷新一.全页面刷新修改 App.vue,代码如下:<...
    99+
    2023-06-22
  • uniapp怎么使用navigateBack方法返回上级页面并刷新
    这篇文章主要介绍“uniapp怎么使用navigateBack方法返回上级页面并刷新”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“uniapp怎么使用navigateBack方法返回上级页面并刷新”...
    99+
    2023-07-05
  • VUE单页面应用SEO的方法是什么
    这篇文章主要介绍了VUE单页面应用SEO的方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇VUE单页面应用SEO的方法是什么文章都会有所收获,下面我们一起来看看吧。vue-meta-info ...
    99+
    2023-06-27
  • Vue单页面应用做预渲染的方法实例
    目录前言vue-cli2.0版本vue-cli3.0版本总结前言 使用vue-cli打包项目一般为spa项目,众所周知单页面应用不利于SEO,有ssr(服务端渲染)和预渲染两种解决方...
    99+
    2022-11-12
  • vue跳转页面常用的4种方法与区别小结
    目录1:router-link跳转2:this.$router.push()3.  this.$router.replace() 4.  this.$r...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作