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

目录
  • 方法1：直接调用函数
  • 方法2：采用provide / inject(静刷新)
  • 优势比较

方法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页面刷新的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue3中provide和inject的使用

    vue3中provide和inject的使用

    1.provide 和 inject 的讲解 provide和inject可以实现嵌套组件之间进行传递数据. 这两个函数都是在setup函数中使用的. 父级组件使用provide向下进行传递数据: 子级组件使用inject来获取上级组件传递过来的数据: 需要注意的是: 1==>provide只能够向下进行传递数据 2==>在使用provide和inject的时候需从vue中引入 2.provide 和 inject 的使用 我们将创建2个组件 儿子组件ErZi.vue 孙子组件SunZI.vu

  • Vue.js中provide/inject实现响应式数据更新的方法示例

    vue.js官方文档:https://cn.vuejs.org/v2/api/#provide-inject 首先假设我们在祖辈时候传入进来是个动态的数据,官方不是说如果你传入了一个可监听的对象,那么其对象还是可响应的么? parent父页面: export default { provide() { return { foo: this.fonnB } }, data(){ return { fonnB: 'old word '} } created() { setTimeout(()=>{

  • 聊聊Vue中provide/inject的应用详解

    众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数据管理的 Vuex. 在这么多的组件通信方式中,provide/inject 显得十分阿卡林(毫无存在感).但是,其实 provide/inject 也有它们的用武之地.今天,我们就来聊聊 Vue 中 provide/inject 的应用. 何为 provide/inject provide/inj

  • vue项目刷新当前页面的三种方法

    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下 那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上 这时候我们最直接的思维就是想到下面这种: 但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本

  • vue中使用[provide/inject]实现页面reload的方法

    在vue中实现页面刷新有不同的方法: 如:this.$router.go(0),location.reload()等,但是或多或少会存在问题,如页面会一闪等 所以建议使用[provide/inject]实现刷新 该方法t简单的来说就是在父组件中 1.设置provider 2.然后在子组件中通过inject调用 3.在需要执行的地方直接调用方法即可 总结 以上所述是小编给大家介绍的vue中使用[provide/inject]实现页面reload的方法,希望对大家有所帮助,如果大家有任何疑问请给我留

  • vue中的provide/inject的学习使用

    vue中的provide/inject的学习使用

    前言 最近在看element-ui的源码,发现了一个这样的属性:inject.遂查看官网provider/inject provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量. 需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据.而不是局限于只能从当前父组件的prop属性来获取数据. 下面我们来验证下猜想: first:定义一个parent component <template

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

    目录 方法1:直接调用函数 方法2:采用provide / inject(静刷新) 优势比较 方法1:直接调用函数 将整个页面重载, 以下两种都可以 1.window.location.reload() 2.this.$router.go() 方法2:采用provide / inject(静刷新) 在高阶函数中声明一个reload刷新函数 <template> <div id="app" v-if="show"></div> &l

  • javascript刷新父页面方法汇总详解

    1.用iframe.弹出子页面刷新父页面iframe <script language=JavaScript> parent.location.reload(); </script> 2.弹出子页面 <script language=JavaScript> window.opener.location.reload(); </script> 3.子窗口刷新父窗口 <script language=JavaScript> self.opener.l

  • Vue 中 provide和inject的使用

    Vue 中 provide和inject的使用

    目录 前言 Vue中如何使用provide和inject 在 Vue 中使用注入访问父数据 前言 在Vue中我们可以很方便的通过父组件往子组件传递属性,Props是我们将数据传递到子组件的主要方式之一.例如,下面的代码,我们往子组件(PopularList )传递了属性 name,其值是Most Popular Posts.在PopularList中我们可以通过name访问数据. <PopularList name="Most Popular Posts" /> 但是有时子

  • Vue刷新修改页面中数据的方法

    因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初始化代码: <script type="text/javascript" charset="utf-8"> mui.init(); var data = { dx:

  • vue缓存的keepalive页面刷新数据的方法

    用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认修改之后,回退到a页面,a页面需要更新这条数据 实现这个功能的时候,由于是路由页面之间的跳转,首先想到的方案有几个:1. 用sessionStorage本地存储:2. 用路由参数带过去:3. 用兄弟组件传值 由于是添加完之后如果按回退是需要退出整个页面,如果用路由跳转,会出现回退到编辑页面了,所以这

  • 解析vue的provide和inject使用方法及其原理

    首先来谈谈我们为什么要使用provide/inject呢?对于爷爷和孙子组件之间,甚至太爷爷组件与孙子组件通信我们用vuex不就ok了. 那事实的确如此,但是,请听我说但是,有时候你项目比较小甚至组件通信的场景很少的,那么你引入vuex就为了那么几个通信传参是不是很浪费啊.有人也可能会想到使用$parent获取父组件实例,来获取data/methods,这种两层就还好,那多层呢,组件嵌套很深的话,你怎么弄?写个函数把$parent再封装一下.那不是很麻烦吗,现成的你不用非要曲线救国.哈哈-扯远了

  • vue路由history模式页面刷新404解决方法Koa Express

    目录 为什页面刷新会出现404 Node服务使用Koa框架 Node服务使用Express框架 为什页面刷新会出现404 因为vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器,而history模式下当刷新页面之后浏览器会直接去请求服务器,而服务器没有这个路由,于是就出现404. 那为什么页面跳转就是正常的?跳转时其实不是通过请求服务器的,而是通过js操作history的API改变地址完成的. 建议:非C端系统可以

  • vue路由跳转后刷新指定页面的方法

    做项目遇到一个坑:A页面带参跳转到B页面,第二次跳转时的参数与第一次时的参数不同,但是后台查询时还是使用的第一次的参数.需要手动刷新之后,才会使用第二次参数. 鉴于时间原因直接使用刷新页面监听路由的方法.在准备跳转的A页面添加路由跳转监听事件,达到每次A页面跳转B页面时,B页面都会再次重新加载页面. 添加完成后,A页面跳转B页面,B页面成功刷新.正当我高兴的以为又解决了一个bug时,突然发现我从A页面跳转到C页面时,C页面竟然也在发生页面刷新现象.当时着实是将小主吓了一大跳.要知道正是因为要填写

  • vue项目如何刷新当前页面的方法

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue: 声明reload方法,控制r

  • 单页面Vue页面刷新出现闪烁问题及解决

    单页面Vue页面刷新出现闪烁问题及解决

    目录 分析原因: 为什么刷新会出现闪烁的问题? 解决方法: 使用 v-cloak 用法 关于Vue刷新页面问题 如何解决 provide / inject 组合 分析原因: 为什么刷新会出现闪烁的问题? 因为浏览器是html从上到下执行, 先执行Dom元素 然后执行javaScript元素 当走到javaScript时,Dom元素已经开始走动,所以如果网慢的话,会显示的特别明显 解决方法: 使用 v-cloak 用法 v-cloak指令 和 css规则 [v-cloak] {display:no

随机推荐