首页 | 编程 | Java

Vue 重置组件到初始状态的方法示例

2017年11月30日 作者：spolier 原文

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 在切换时，元素及它的绑定数据和组件都会被销毁并重建

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持来客网。

相关链接