Vue 重置组件到初始状态的方法示例


Posted in Javascript onOctober 10, 2018

Vue

通过直接强制刷新 DOM 来达到重置组件的效果,这样可以重置一些组件的动画以及组件内初始的数据

强制重新生成 DOM 的实现

原理:强制重新生成 DOM 可以通过 Vue 中的 key 来实现。在 Vue 更新 Dom 时,如果 key 值相同则会对原有组件进行复用,如果不同,则会重新生成。

代码示例:

每次点击 refresh 按钮,Demo 组件都会重新生成

组件:

/**
 * Demo.vue
 */
<template>
 <div>Demo</div>
</template>
<script>
 export default {
  data () {
   return {}
  },
  created: function () {
   console.log('created')
  }
 }
</script>

主页面:

/**
 * Index.vue
 */
<template>
 <div>
 <Demo :key="id"></Demo>
 <button @click="refresh">refresh</button>
 </div>
</template>
<script>
 import Demo from './Demo'
 export default {
  data () {
   return {
    id: +new Date()
   }
  },
  methods: {
    refresh: function () {
    this.id = +new Date()
   }
  },
  components: {
   Demo
  }
 }
</script>

注:

对 +new Date() 的说明:
4 个结果一样,都是返回当前时间的毫秒数
alert(+new Date())
alert(+new Date)
var a=new Date()
alert(a.valueOf())
alert(a.getTime())

补充:vue强制刷新组件

把一个组件重置到初始状态是一个常见的需求,推荐的做法有两种,一种是父组件重置子组件的 prop,另一种是子组件暴露一个重置的方法供父组件调用。但有些时候,子组件既没有提供重置的方法,也没提供 prop 来重置自己的状态。更重要的是,这个子组件我们还动不了。于是我们就需要一种 hack 的方式来强制子组件重置到初始状态。方法如下:

<component v-if="hackReset"></component>

this.hackReset = false
this.$nextTick(() => {
this.hackReset = true
})

v-if 在切换时,元素及它的绑定数据和组件都会被销毁并重建

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
15 个 JavaScript Web UI 库
May 19 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
js实现自定义路由
Feb 04 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
15个顶级开源JavaScript框架和库
Oct 10 #Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 #Javascript
js 实现在2d平面上画8的方法
Oct 10 #Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 #Javascript
js正则取值的结果数组调试方法
Oct 10 #Javascript
webpack dll打包重复问题优化的解决
Oct 10 #Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 #Javascript
You might like
初品cakephp 入门基础
2012/02/16 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
js实现进度条的方法
2015/02/13 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
详解python:time模块用法
2019/03/25 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
公司董事长岗位职责
2014/06/08 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
政协会议宣传标语
2014/10/09 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
居住证明范文
2015/06/17 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技