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中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
理解JS绑定事件
Jan 19 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
PHP中SESSION过期设置
2021/03/09 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
vue时间格式化实例代码
2017/06/13 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
PyQt5每天必学之关闭窗口
2018/04/19 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
大学班级学风建设方案
2014/05/01 职场文书
数学教育专业求职信
2014/07/22 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
服务器nginx权限被拒绝解决案例
2022/09/23 Servers