天天看點

vue的頁面重新整理和單獨元件的銷毀重建

首先:vue的全局頁面重新整理方法,原理都是一樣,用v-if控制元件的狀态,然後在銷毀重建

//1、在app.vue中定義方法:
<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>//1、加v-if,控制整個app頁面
  </div>
</template>

<script>
export default {
  name: 'App',
  provide(){
    return{
      reload:this.reload//2、定義狀态
    }
  },
  data(){
    return{
      isRouterAlive:true
    }
  },
  methods:{
    reload(){//頁面重新整理方法
      this.isRouterAlive = false//3、定義方法,調動讓他銷毀掉
      this.$nextTick(()=>{
        this.isRouterAlive = true
      })
    }
  }
}
</script>

<style >
</style>

//--------------------------------------------------------------------
2、調用頁面:

 inject:['reload'],//注入reload方法

 this.reload();//頁面重新整理方法-這個頁面元件-需要的地方調用這個方法
           

其次,單獨銷毀某個元件:

1、template部分 
<cTable v-if="hackReset" :list="jrzytjData" :columns="JRZYTJcolumns"  @clickRow="jrzytjClick" @jrzytjSelChange='jrzytjSelChange' :tableClass="'jrzytjTb'"></cTable>
2、js部分
data裡面注冊變量:
     hackReset:true,//銷毀重新建立元件
需要調動方法的部分:
          /**
            * 元件銷毀并删除
           */
          this.hackReset = false
          this.$nextTick(()=>{
            this.hackReset = true
          })