柴门鸟雀噪，归客千里至。光明顶下来，一路听着阵阵松涛，我们走过西海，飞来石，天海，爬过百步云梯，伴着凤凰松迎客松的多姿到了玉屏峰。玉屏峰犹如一道屏障，山面光滑如镜子，如屏风，还不时有几个斗大的字，说是哪位名人留下的。玉屏峰最险的地方是在一线天，上下达七八十度的落差，台阶狭，仅容一人，台阶窄，仅托一足，百米长，走多了，腿便打抖了，害怕了，还不时地叫着好刺激呀。
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 在切换时，元素及它的绑定数据和组件都会被销毁并重建
到此这篇关于Vue 重置组件到初始状态的方法示例就介绍到这了。人生之路上，永远没有后悔药可以买。我们无法回到过去，那就更加应该把握住现在，而不让将来的我们为现在而后悔。更多相关Vue 重置组件到初始状态的方法示例内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
