(1)使用v-if 当v-if为true时就会重新渲染组件 eg:test为组件
<template>
<div>
<test v-if="reCreate"></test>
<button @click="close">点击成功销毁</button>
<button @click="open">点击成功创建</button>
</div>
</template>
<script>
export default {
data:{
reCreate: true
},
methods:{
open(){
this.reCreate= true
},
close(){
this.reCreate = false
}
}
</script>
(2)绑定key值 改变key值 eg:test为组件
<template>
<div>
<test :key="key"></test>
<button @click="reCreate">点击重新创建</button>
</div>
</template>
<script>
export default {
data:{
key: 0
},
methods:{
reCreate(){
this.key++
}
}
</script>
PS:但是把,组件老是被销毁重建就不太好了,太多会影响性能,毕竟dom渲染需要时间的,用户体验没那么好。