Vue 重置组件到初始状态的方法示例
更新时间：2018年10月10日 10:10:12 作者：spolier
这篇文章主要介绍了Vue 重置组件到初始状态的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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 在切换时，元素及它的绑定数据和组件都会被销毁并重建
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何利用vue3实现简单的印章徽章控件，文中通过示例代码讲解详细，需要的朋友们下面就跟随小编来一起学习学习吧2023-04-04
mitt 主要有4个API：emit（触发某个事件）、on（绑定事件）、off（解绑某个事件）、all（获取所有绑定的事件）,这篇文章主要介绍了Vue3 组件间通信之mitt实现任意组件间通信,需要的朋友可以参考下2024-05-05
这篇文章主要为大家详细介绍了vue实现div高度可拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家详细介绍了Vue实现时间轴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue axios同步请求解决方案,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了vue 集成jTopo 处理方法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-08-08
vue后台项目如何使用router.addRoutes动态加入路由的思路
这篇文章主要介绍了vue后台项目如何使用router.addRoutes动态加入路由的思路，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
本文给大家带来vue项目在安卓低版本机显示空白的原因分析，根据各自需求给大家带来了两种原因分析，大家可以参考下2018-09-09
这篇文章主要给大家介绍一下如何使用vue3实现简单的滑块组件,文中有详细的代码示例讲解,具有一定的参考价值,感兴趣的小伙伴跟着小编一起来看看吧2023-08-08
这篇文章主要介绍了Vue全局拦截所有请求并在请求头中添加token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最新评论