Vue 重置组件到初始状态

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

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

你可能感兴趣的:(Vue 重置组件到初始状态)