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 相关文章推荐
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
vue模块拖拽实现示例代码
Mar 09 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扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
python统计一个文本中重复行数的方法
2014/11/19 Python
python字符串与url编码的转换实例
2018/05/10 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python新手学习标准库模块命名
2020/05/29 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
教师见习期自我鉴定
2014/04/28 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
拉贝日记观后感
2015/06/05 职场文书
车间班组长竞聘书
2015/09/15 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL