vue和ui框架Tab切换的组件写法

业务中经常碰到很多依靠Tab切换显示的页面 考虑到使用组件方式写入 使用v-if判断只显示当前页面内容以及当前页面需要请求的数据。

      //父组件
       
            
                
            
            
                
            
        
        //注册
        components:{
            'v-cars':cars,//子组件a
            'v-inquiry':inquiry//子组件b
        },
      //根据条件判断显示
        data(){
            return {
                activekey:0,
                isShowCar:true,
                isShowInquiry:false
            }
        },
          methods:{
            handleCallback(activekey){
                this.activekey = activekey;
                if(activekey == '1'){
                    this.isShowCar = true;
                    this.isShowInquiry = false;
                }else if(activekey == '2'){
                    this.isShowCar = false;
                    this.isShowInquiry = true;
                }
            }
        },

你可能感兴趣的:(vue和ui框架Tab切换的组件写法)