(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渲染需要时间的,用户体验没那么好。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐