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

2024-09-29 17:25:12

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中的方法，从而实现了目标效果。

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

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

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

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

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

目录一.应用场景二.实现方法 1.提取js共用方法文件 2.引入三.注意事项一.应用场景多个组件共用一个方法时可以用 mixin 抽取到一个js文件中,作为共用方法二.实现方法 1.提取js共用方法文件 export const common = { // 组件共用属性 ---------------------------------- data() { return { age: 18
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父组件数据更新子组件相关内容未改变问题(用watch解决)

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

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

目录 this.$refs.tabs.refreshs()刷新组件第一种:当前组件刷新第二种:刷新父组件时第三种:非关系组件 vue组件重新加载(刷新) 如何刷新当前组件 this.$refs.tabs.refreshs()刷新组件当更改了用户信息后,需要刷新页面或者组件. 第一种:当前组件刷新定义一个请求用户信息的方法,在需要时调用: sessionStorage.setItem('userInfo',JSON.stringify(this.userInfo)); //从sessio
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解决多路由复用同一组件页面不刷新问题(场景分析)

目录简介问题复现代码测试解决方案方案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