vue的页面刷新和单独组件的销毁重建
首先:vue的全局页面刷新方法,原理都是一样,用v-if控制组件的状态,然后在销毁重建//1、在app.vue中定义方法:<template><div id="app"><router-view v-if="isRouterAlive"></router-view>//1、加v-if,控制整个app页面</div&...
·
首先: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 lang='less'>
</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
})
更多推荐
已为社区贡献102条内容
所有评论(0)