vue关于this.$refs.tabs.refreshs()刷新组件方式

目录
  • this.$refs.tabs.refreshs()刷新组件
    • 第一种：当前组件刷新
    • 第二种：刷新父组件时
    • 第三种：非关系组件
    • vue组件重新加载（刷新）
  • 如何刷新当前组件

this.$refs.tabs.refreshs()刷新组件

当更改了用户信息后，需要刷新页面或者组件。

第一种：当前组件刷新

定义一个请求用户信息的方法，在需要时调用：

sessionStorage.setItem(‘userInfo‘,JSON.stringify(this.userInfo));
//从session缓存中获取

第二种：刷新父组件时

子组件某个需要的地方：

this.$emit(‘refresh‘);  

父组件：

methods:{
     refresh() {
            this.userInfo = JSON.parse(sessionStorage.getItem(‘userInfo‘));
     }
},

第三种：非关系组件

父组件：

<template>
   <top-bar ref="tabs"/>   //需要刷新的组件（非关系组件）
</template>
methods:{
    refresh() {
        this.$refs.tabs.refreshs();  //刷新子组件 ，top-bar是vue组件实例的名字 ,tabs时引用的名字,refreshs是Vue自带的方法
    }
},

vue组件重新加载（刷新）

方法：利用v-if控制router-view，在根组件APP.vue中实现一个刷新方法

<template>
    <router-view v-if="isRouterAlive"/>     //路由的组件
</template>
<script>
export default {
 data () {
   return {
     isRouterAlive: true
   }
 },
 methods: {
   reload () {
     this.isRouterAlive = false
     this.$nextTick(() => (this.isRouterAlive = true))
   }   
 }
}
</script>

然后其它任何想刷新自己的路由页面，都可以这样：

this.reload()

如何刷新当前组件

公用内容动态改变了全局参数，要求切换后刷新当前组件所有请求，或重新加载当前组件。

因为我们在项目中加入了vue-routerapp.vue，就可以通过控制router-view去达到我们需求的效果。

同时也要用到 provide/inject，个人列表类似vuex的辅助函数，跨越层级关系引入（注入）你的某个方法。

app.Vue

<template>
  <div id="app" v-loading.fullscreen.lock="fullscreenLoading"  element-loading-spinner="rybloading" element-loading-text="正在请求数据" element-loading-background="rgba(0, 0, 0, 0.6)">
    <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>

然后在你修改全局参数的组件中加入

data(){
	return{

	}
},
inject:['reload'], // 在这个组件中注入这个方法
//...事件中调用
methods:{
	changed(){
		this.reload() //调用
	}
}

我在项目中的具体表现

通过切换期次，修改全局的请求参数，结合了Vuex，在下拉菜单所在的组件中注入app.vue中的方法，从而实现了目标效果。

切换期次，重新加载当前组件所有数据。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue install 注册全局组件方式

    目录 vue install注册全局组件 1.首先先建立一个公用的组件 2.新建一个install.js文件 3.在main.js文件中注册 4.在页面中使用 vue插件的install方法 vue install注册全局组件 项目中的有些组件使用的频率比较高,这时候我们可以注册全局的组件,这样就不用每次使用的组件的时候一次次的导入 具体使用的步骤如下 一般会把这个常用的组件在main.js文件中注册好 1.首先先建立一个公用的组件 // Cmponent.vue 公用的组件 <template

  • vuex如何在非组件中调用mutations方法

    目录 在非组件中调用mutations方法 在组件中调用 在非组件中调用 vuex的mutations属性 mutations属性介绍 对象风格的提交方式 使用常量替代 Mutation 事件类型 Mutation 必须是同步函数 在组件中提交 Mutation 在非组件中调用mutations方法 一般情况下调用 mutations.js 中的方法都是在组件中,如果想在非组件中调用,则需要使用如下方式 在组件中调用 import {mapMutations} from 'vuex' impor

  • vue全局组件和局部组件的写法介绍

    目录 全局组件和局部组件写法 全局组件引入写法 局部组件引入写法 vue全局/局部组件 全局组件和局部组件写法 vue组件有两种,一种是全局组件,一种是局部组件.整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件. 全局组件引入写法 在项目的main.js中: import Vue from 'vue'; import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件   Vue.use(MyComp

  • vue父组件数据更新子组件相关内容未改变问题(用watch解决)

    父组件数据更新子组件相关内容未改变 父组件 在父组件中,根据后台给的数据(数组),v-for生成子组件    <div class="exist">                     <existProject :itemprop="item" v-for="(item, index) in getData" :key="index" :index="index" @click=&q

  • vue实现全局组件自动注册,无需再单独引用

    vue实现全局组件自动注册,无需再单独引用

    目录 vue全局组件自动注册 自动化注册全局组件脚本 vue全局组件自动注册 1.在components目录下创建一个global目录,里面放置一些需要全局注册的组件. index.js作用只要是引入main.vue,导出组件对象 2.在components中创建一个index.js,用来扫描全局对象并自动注册. 3.最后在入口文件main.js中导入这个index.js中就可以了 4.直接使用 自动化注册全局组件脚本 今天有一个idea,vue一些组件,可能会全局都用到,我觉得在main.js

  • Vue组件公用方法提取mixin实现

    Vue组件公用方法提取mixin实现

    目录 一.应用场景 二.实现方法 1.提取js共用方法文件 2.引入 三.注意事项 一.应用场景 多个组件共用一个方法时可以用 mixin 抽取到一个js文件中,作为共用方法 二.实现方法 1.提取js共用方法文件 export const common = {          // 组件共用属性 ----------------------------------     data() {         return {             age: 18              

  • vue关于this.$refs.tabs.refreshs()刷新组件方式

    vue关于this.$refs.tabs.refreshs()刷新组件方式

    目录 this.$refs.tabs.refreshs()刷新组件 第一种:当前组件刷新 第二种:刷新父组件时 第三种:非关系组件 vue组件重新加载(刷新) 如何刷新当前组件 this.$refs.tabs.refreshs()刷新组件 当更改了用户信息后,需要刷新页面或者组件. 第一种:当前组件刷新 定义一个请求用户信息的方法,在需要时调用: sessionStorage.setItem('userInfo',JSON.stringify(this.userInfo)); //从sessio

  • vue tree封装一个可选的树组件方式

    vue tree封装一个可选的树组件方式

    目录 组件实现的基本功能 先看效果图 组件实现的基本功能 1,根据后端返回的数据格式,传入组件动态的渲染出当前角色有哪些权限(新建,修改) 2,适配有2级和只有一级多选的数据 3,有全选(√) ,全不选 ,部分已选(-)的3装状态,每一级都支持(用的iview2次封装) 4,改变之后返回当前选中的所有权限的id,用于提交 5,手风琴效果,小屏适配 先看效果图 有部分权限没打开 打开 小屏 权限数据结构,select_status=1表示选中 默认添加没有权限的初始数据结构 有些数据只有一级子菜单

  • vue下拉刷新组件的开发及slot的使用详解

    "下拉刷新"和"上滑加载更多"功能在前端.尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的"blink"功能和各位探讨下[下拉刷新]组件的开发: 正式开篇 在前端项目的 components 文件夹下新建 pullRefreshView 文件夹,在其中新建组件 index.vue:(它代表"整个屏幕",通过slot插入页面其他内容而不是传统的设置遮罩层触发下拉刷新) 首先需要编写下拉刷新组件的 template,

  • vue.js $refs和$emit 父子组件交互的方法

    本文介绍了vue.js $refs和$emit 父子组件交互的方法,分享给大家,废话不多说直接看代码: <strong>父调子 $refs (把父组件的数据传给子组件) </strong><br><br><template> <div id="app"> <input type="button" name="" id="" @click="

  • vue基本使用--refs获取组件或元素的实例

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods 添加ref属性 <div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref="ho">&l

  • vue强制刷新组件的方法示例

    前言: 在开发过程中,有时候会遇到这么一种情况,通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,这就需要我们手动进行强制刷新组件. 官网是这样说的: 可能你还不大理解,请继续往下看,下面是我的一个例子,来详细解说了这个方法的使用, 第一个打印结果 第二个打印结果 一.问题描述:父组件通过v-for渲染子组件,删除子组件数据出现异常. <code class="language-plain"><section v-if=

  • vue相同路由跳转强制刷新该路由组件操作

    想必大家在平时开发的时候可能遇到这种需求,在打开该菜单页面的情况下,再次点击菜单需要刷新该组件(销毁再创建).而vue自身如果路由不变的情况下是不会这样做的,那么只能使用一些骚操作了. 1.在菜单的路由跳转上绑定一个随机query参数,例如时间戳或者随机数: this.$router.push({ path:"/xxx", query:{ t:Date.now(), }, }); 该操作会触发路由改变,但是组件内的状态没有初始化,因为组件没有被重建. 2.在路由容器上绑定key值: &

  • Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)

    Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)

    目录 简介 问题复现 代码 测试 解决方案 方案1:导航守卫 方案2:watch监听$route 方案3:父组件router-view指定key 其他网址 简介 说明 本文介绍如何解决Vue的多路由复用同一组件页面不刷新问题. 多路由复用同一组件的场景 多路由使用同一组件 比如:添加博客(path为:/addBlog)和编辑博客(path为:/editBlog)都对应同一个组件(EditBlog.vue) 动态路由 比如:用户详情页采用动态路由,其path为:/user/:id,组件都是User

  • 详解vue mint-ui源码解析之loadmore组件

    本文介绍了vue mint-ui源码解析之loadmore组件,分享给大家,具体如下: 接入 官方接入文档mint-ui loadmore文档 接入使用Example html <div id="app"> <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :max-dis

  • Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

    本文实例讲述了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能.分享给大家供大家参考,具体如下: 公司要写一些为自身业务量身定制的的组件,要基于Vue,写完后扩展了一下功能,选择写图片上传是因为自己之前一直对这个功能比较迷糊,所以这次好好了解了一下.演示在网址打开后的show.gif中. 使用技术:Vue.js | node.js | express | MongoDB. github网址:https://github.com/neroneroffy/privat

随机推荐