vue实现当前组件重新加载

遇到问题的场景：

数据发生了变化，组件并没有响应到

问题所在

需要把当前组件完全还原成初始化状态，不要页面全部刷新

4种解决方法：

重新加载整个页面（不推荐）
v-if可以实现 true (加载)和false(卸载) （不推荐）
使用 $forceUpdate() （可以使用）
使用组件中的 :key （推荐）

这里只介绍第4种

这个最简单实用，如果需要每次在当前父页面更新时重载某个组件就可以用这个方法，每次组件更新 :key 都会重新取值，而时间戳每次都是不同的，组件发现 :key发生变化就会重新渲染

<zujian ref="zujian" :key="new Date().getTime()"></zujian>

直接把new Date().getTime() 放到组件中，每次得到的时间都不一样，变相的达到了组件重新加载的效果，但是这样做也有弊端，最好是找一个每次都会变化的变量，放到key里面

弊端: 如果当前组件同级有input输入框就尴尬了，每次输入都会重载这个CompTable组件，如果页面有表单就只能用v-if或其他的形式了

vue实现当前组件重新加载相关推荐

VUE动态路由组件懒加载解决方案
项目场景: 将项目静态路由替换成动态路由,通过后台数据拿到路由配置信息动态加载问题描述: 小编将路由信息与系统菜单信息存在一起,当登录后拿到菜单信息后同时处理路由数据,过程肯定不是那么一帆风顺的,下 ...
vue vant Image组件图片加载时与加载失败的处理方法
增强版的 img 标签,提供多种图片填充模式,支持图片懒加载.加载中提示.加载失败提示鉴于百度搜索不到vant官方网址,分享一下vant组件库官网地址,方便新手使用 vant官网地址 Vant 3 ...
关于vue 动态引入（异步加载import和require）组件的方法和坑（按需懒加载组件，动态生成路由）babel-plugin-dynamic-import-node 优化编译速度
前言: 最近在改造vue-cli 2.x + webpack2.x的项目时,由于之前路由是静态的,没有根据菜单权限动态生成前端路由.所以想对此进行改造,然后碰到了一些问题和坑,现在总结一下,避免以后继 ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
关于vue的组件重新加载
因为项目样式的问题,所以没有选择去使用路由跳转,而是在一个页面当中import. 这样随之而来的问题就是进来默认加载造成的页面非常卡... 那么想了一个办法解决这个问题利用组件重新加载详细 > ...
vue 父组件重新加载子组件
vue 父组件重新加载子组件通过给子组件添加key或者v-if 重新加载子组件: html: <button @click="update">更新</butt ...
vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多问题起源于我们的一个页面,下 ...
vue 组件延时加载_为什么以及如何延迟加载角组件
vue 组件延时加载 "Before software can be reusable it first has to be usable." "在软件可重用之前,首先必 ...