elementui el-tab页面切换如何自动刷新当前页面?

问题描述:

当tab页面第一次切换时会自动刷新页面,但当第二次再切换到该页面是不自动刷新,如何让每次切换都刷新问题。

解决方法:

去掉keep-alive。子组件修改监听事件。

keep-alive:主要用于保留组件状态或避免重新渲染。

父组件原代码(无法实现切换自动刷新):


            
                
                    
                
            
            
                
                    
                
            
            
                
                    
                
            
            
                
                    
                
            

1、父组件修改后代码:去掉了keep-alive。


            
               
            
            
               
            
            
                
            
            
                
            

2、子组件也就是child 使用watch来监听el-tabs中是哪个tab被点击,使用属性props对父组件中的属性进行声明,但是监听时需要添加 immediate:true,handler(){},才能起作用。

完美解决问题。

watch: {
    '$props.params' :{
        immediate:true,
        handler(){
            if (this.$props.myidx == this.$props.params) {
                this.getWork();
            }
        }
    }
},
props:['params', 'myidx']

你可能感兴趣的:(vue,elementui,elementui,vue)