vue 自定义组件切换时刷新

2024-06-20 22:48:57

我们在使用vue自定义组件时，常常会遇到切换组件的操作，但是切换组件的时候，如果没有处理好，组件内容就不会刷新。如：标签页下放自定义组件，切换标签时，组件里面的内容不刷新，导致页面停留在上一次的操作。那么我们应该如何来解决这个问题呢？接下来说说我在网上看到的两种方法

一、通过v-if来刷新

当我们在父辈组件请求后台接口完成后要刷新子孙组件时，我们就可以在父辈组件调用以下函数,实现子孙组件的刷新（感觉这种方法怪怪的，个人喜欢第二种方法）
上代码：

//父组件内容
<child v-if="show"></child>js:
refresh（）{this.show = false;this.$nextTick(() => {this.show = true;});
}

补充：使用v-if来有条件的渲染组件，还可以避免父组件异步传值失败的问题。比如我们要在父组件请求后台数据，并且要将数据在子组件渲染，这时就可以用v-if，有数据时才渲染子组件，就不会出错了。

二、通过key来刷新

key 属性不是给开发人员用的，而是用来给vue 元素渲染的时候用的，每次渲染的时候会去拿这个key 值做对比，如果这一次的key 值和上一次的key值是不一样的才会重新渲染dom 元素，否则保持上一次的元素状态。
根据这个原理我们可以给key 直接绑定一个时间戳

代码

父组件
<button @click="handleLoad">点击重新加载子级</button>
<children :key="timer"></children>methods: {handleLoad () {this.timer = new Date().getTime()}}

每次点击的时候都会重新加载子组件，created() 生命周期函数每次都会执行，重新生成dom 元素。也省的用watch 去监听了！

总结：以上两种方法都能实现，应该还有其他的方式，知道的小伙伴可在下方评论哦。
另外：本文纯属个人笔记，如有说错的地方，希望大家积极纠正

vue 自定义组件切换时刷新相关推荐

Vue自定义组件并引入
今天,bug菌为大家带来一期帝王级干货,有关于前端vue的组件教学,深入指引大家在vue中如何创建自定义的组件,并且在vue中引入你自定义的组件: 具有很好的教学价值,希望小伙伴们根据这篇文章可以有所 ...
Vue自定义组件之时间跨度选择器
时间跨度选择器该组件是个时间跨度选择器. 基于 vue自定义组件之选择器和 Vue自定义组件之日期时间范围选择器点击选框,下拉列表中有四个选项,点击自定义时间,后边会出现日期时间范围选择代码 ...
Vue自定义组件npm上传私服，且从私服下载使用
Vue自定义组件npm上传私服,yarn私服下载使用安装镜像源管理工具nrm 发布自定义组件到公司私服若未下载nrm源管理工具直接使用npm设置私服地址也可以以下步骤都是基于npm命令从私服下 ...
vue 自定义组件双向数据绑定
文章目录序属性&事件传值双向绑定 v-model组件双向绑定 .sync修饰符双向绑定总结 !!!这边文章记录的是 vue2 的概念,vue3 对双向绑定进行了改动,不要把一下代码放到 ...
vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
Vue自定义组件 Vue.component
Vue.component Vue自定义组件(1) 如果有朋友对Vue基础还不够了解的可以先看下官方的教程 http://doc.vue-js.com/v2/guide/ 这个是官方的网址,官方的教 ...
vue 自定义组件创建及其使用
vue 自定义组件创建及其使用 1.vue 自定义组件有全局注册和局部注册两种方式: 全局注册通过 Vue.component 来创建组件,这些组件是全局注册的.也就是说它们在注册之后可以用在任何新 ...
vue自定义组件，插槽，自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件语法 Vue.component('自定义组件名', {pr ...
vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件生成 Maker let rule = [ formCreat ...

最新文章

热门文章