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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
JS 控制CSS样式表
Aug 20 Javascript
JS定时关闭窗口的实例
May 22 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
express框架中使用jwt实现验证的方法
Aug 25 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
PHP 第二节 数据类型之转换
2012/04/28 PHP
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
python机器学习之决策树分类详解
2017/12/20 Python
彻底搞懂Python字符编码
2018/01/23 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
python实现的分层随机抽样案例
2020/02/25 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
浅谈python锁与死锁问题
2020/08/14 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
禁毒宣传标语
2014/06/19 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
如何写股份合作协议书
2014/09/11 职场文书
保卫工作个人总结
2015/03/03 职场文书
关于召开会议的通知
2015/04/15 职场文书
风之谷观后感
2015/06/11 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python