资讯专栏INFORMATION COLUMN

Vue 重置组件到初始状态

senntyou / 3480人阅读

摘要:重置组件到初始状态通过直接强制刷新来达到重置组件的效果,这样可以重置一些组件的动画以及组件内初始的数据强制重新生成的实现原理强制重新生成可以通过中的来实现。在更新时,如果值相同则会对原有组件进行复用,如果不同,则会重新生成。

Vue 重置组件到初始状态

Vue

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

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

代码示例:

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

组件:

/**
 * Demo.vue
 */

主页面:

/**
 * Index.vue
 */

注:

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

License

可以拷贝、转发,但是必须提供原作者信息,同时也不能将本项目用于商业用途。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98228.html

相关文章

  • 高级 Vue 组件模式 (7)

    摘要:使用目标到目前为止,仅从组件自身的角度来看,它已经可以满足大多数的业务场景了。但我们会发现一个问题,就是当前组件的状态对于调用者来说,完全是黑盒状态,即调用者无法初始化,也无法更改组件的开关状态,这在一些场景无法满足需求。 07 使用 State Initializers 目标 到目前为止,仅从 toggle 组件自身的角度来看,它已经可以满足大多数的业务场景了。但我们会发现一个问题,...

    Caizhenhao 评论0 收藏0
  • 动态生成form表单,不再为表单烦恼

    摘要:具有数据收集校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框单选框输入框下拉选择框等表单元素以及省市区三级联动时间选择日期选择颜色选择滑块评分框架树型文件图片上传等功能组件。 form-create 具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,...

    kamushin233 评论0 收藏0
  • 好用的Vue状态管理模式:浅谈Vuet在实际应用中解决的问题

    摘要:而的状态测试更类似于单元测试,和组件的依赖较低,组件只会存在调用模块的方法或者读取状态,在组件频繁的改动中,而的改动相对会较小,所以状态测试便会存在一定的价值。 父子组件通信 showImg(https://segmentfault.com/img/remote/1460000010761687); Vuet提供了模块化的状态管理,通过对一个组件的注入,再向其子组件进行分发,使得我们可...

    WilsonLiu95 评论0 收藏0
  • vuex 闲置状态重置方案

    摘要:为了做到页面的极致优化,我们需要将那些闲置的状态重置,以减小占用的内存空间。不如当路由改变时去重置中的所有状态。这里只是提供一种重置状态的一种方案,如果有更好方案还请各位看官留言。 前言 大型单页应用(后面都是指spa),我们往往会通过使用状态管理器 vuex 去解决组件间状态共享与状态传递等问题。这种应用少则几十个单页,多则上百个单页。随着路由的频繁切换,每个路由对应的 vuex 中...

    junfeng777 评论0 收藏0
  • vue vuex vue-rouert后台项目——权限路由(超详细简单版)

    摘要:可以配合相关的官方文档学习。上面的内容说的重点,其实也算是项目的全部啦项目地址感觉还不错的话就请给个吧谢谢有什么问题欢迎提问 项目地址:vue-simple-template共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blue 页面(共三个页面)barbara 拥有 权限B 他可以看到...

    olle 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<