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

/
  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()
   }
  },
  ponents: {
   Demo
  }
 }
</script>

<ponent v-if="hackReset"></ponent>

this.hackReset = false
this.$nextTick(() => {
this.hackReset = true
})