vue之tab切换

1.定义子组件(就只示列一个组件的代码)
<template>
  <!-- 公司简介 -->
  <div id="select_four">
    <div class="cont_list">
      <div class="this_name">
        <i></i>公司简介
      </div>
      <div class="this_cont">
        <div class="no_certification">
          <p class="p_ps">* 填写完成相应内容后,公司运营人员会在8小时内完成核查,核查通过后可以上传产品</p>
          <div class="no_kong">
            <i class="img_sprites"></i>
            <p>您还未认证请快速认证</p>
            <a href>企业认证</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "select_four"
};
</script>
<style lang="scss" scoped>
.img_sprites {
    background: url("../../../static/img/css_sprites.png") no-repeat center;
    background-size: 178px 144px;
    display: inline-block;
  }
#select_four {
  .cont_list {
    padding-right: 16px;
    .this_name {
      height: 56px;
      line-height: 56px;
      color: #333333;
      font-size: 16px;
      border-bottom: 1px solid #e6e6e6;
      i {
        background: #2590ff;
        width: 3px;
        height: 16px;
        display: inline-block;
        vertical-align: text-top;
        margin: 2px 8px 0 0;
      }
    }
    .this_cont {
      .no_certification {
        .p_ps {
          color: #7d7d7d;
          font-size: 12px;
          line-height: 12px;
          padding: 17px 0 0;
        }
        .no_kong {
          text-align: center;
          font-size: 12px;
          padding: 114px 0 0;
          i {
            width: 145px;
            height: 110px;
            background-position: -5px -5px;
          }
          p {
            color: #7d7d7d;
            line-height: 12px;
            padding: 20px 0 12px;
          }
          a {
            border: 1px solid #2590ff;
            color: #2590ff;
            height: 36px;
            padding: 0 33px;
            line-height: 36px;
            border-radius: 1px;
            display: inline-block;
            text-decoration: none;
            opacity: .8;
          }
          a:hover{
            opacity: 1;
          }
        }
      }
    }
  }
}
</style>
(2)在你写tab切换的页面中将子组件引入,通过@click给每个要点击的按钮添加tabChange事件,通过:class实现绑定当前页,tab切换主要依靠组件component实现,每个页签切换时,不想让改变页签内容,可以用keep-alive实现。ps(‘active_dd 是页签高亮显示类名’)具体代码如下:
<template>
  <!-- 个人中心 -->
  <div id="personalCenter">
    <!-- 导航栏 -->
    <headers></headers>
    <div class="auto_1200 clearfloat">
      <div class="left_max">
        <div class="top_name">基本服务</div>
        <dl class="slect_list">
          <dt>
            <i class="img_sprites icon_a"></i>
            <span>我的店面</span>
          </dt>
          <dd :class="{active_dd:iscur== 0}" @click="iscur=0,tabChange('select_zero')">店面设置</dd>
          <dt>
            <i class="img_sprites icon_b"></i>
            <span>我的产品</span>
          </dt>
          <dd :class="{active_dd:iscur== 1}" @click="iscur=1,tabChange('select_one')">添加新产品</dd>
          <dd :class="{active_dd:iscur== 2}" @click="iscur=2,tabChange('select_two')">管理产品</dd>
          <dd :class="{active_dd:iscur== 3}" @click="iscur=3,tabChange('select_three')">管理分组</dd>
          <dt>
            <i class="img_sprites icon_c"></i>
            <span>我的账户</span>
          </dt>
          <dd :class="{active_dd:iscur== 4}" @click="iscur=4,tabChange('select_four')">公司简介</dd>
          <dd :class="{active_dd:iscur== 5}" @click="iscur=5,tabChange('select_five')">收款记录</dd>
          <dd :class="{active_dd:iscur== 6}" @click="iscur=6,tabChange('select_six')">更改密码</dd>
          <dt>
            <i class="img_sprites icon_d"></i>
            <span>通知</span>
          </dt>
          <dd :class="{active_dd:iscur== 7}" @click="iscur=7,tabChange('select_seven')">通知</dd>
          <dt>
            <i class="img_sprites icon_e"></i>
            <span>我的订单</span>
          </dt>
          <dd :class="{active_dd:iscur== 8}" @click="iscur=8,tabChange('select_eight')">接单</dd>
          <dd :class="{active_dd:iscur== 9}" @click="iscur=9,tabChange('select_nine')">已接订单</dd>
        </dl>
      </div>
      <div class="right_max">
        <keep-alive>
          <component v-bind:is="tabView"></component>
        </keep-alive>
      </div>
    </div>
    <footers></footers>
  </div>
</template>
<script>
import headers from "@/views/headers";
import footers from "@/views/footers";
import select_zero from "../../components/personalCenter_wj/select_zero";
import select_one from "../../components/personalCenter_wj/select_one";
import select_two from "../../components/personalCenter_wj/select_two";
import select_three from "../../components/personalCenter_wj/select_three";
import select_four from "../../components/personalCenter_wj/select_four";
import select_five from "../../components/personalCenter_wj/select_five";
import select_six from "../../components/personalCenter_wj/select_six";
import select_seven from "../../components/personalCenter_wj/select_seven";
import select_eight from "../../components/personalCenter_wj/select_eight";
import select_nine from "../../components/personalCenter_wj/select_nine";

export default {
  name: "personalCenter",
  data() {
    return {
      iscur: 4,     //默认显示组件的下标
      tabView: "select_four"   //默认显示公司简介组件
    };
  },
  components: {
    headers,
    footers,
    select_zero,
    select_one,
    select_two,
    select_three,
    select_four,
    select_five,
    select_six,
    select_seven,
    select_eight,
    select_nine
  },
  methods: {
    //tab切换
    tabChange: function(tab) {
      this.tabView = tab;
    }
  }
};
</script>
<style lang="scss" scoped>
#personalCenter {
  .auto_1200 {
    padding: 12px 0 124px;
    .left_max {
      float: left;
      background: #f7f7f7;
      width: 217px;
      height: 548px;
      border-radius: 2px;
      .top_name {
        color: #333333;
        font-size: 16px;
        text-align: center;
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid #e6e6e6;
      }
      .slect_list {
        dt {
          box-sizing: border-box;
          padding: 16px 12px 8px 28px;
          font-size: 14px;
          line-height: 14px;
          display: flex;
          align-items: center;
          span {
            color: #333333;
          }
          .icon_a {
            background-position: -5px -125px;
            width: 15px;
            height: 14px;
            margin-right: 8px;
          }
          .icon_b {
            background-position: -29px -125px;
            width: 13px;
            height: 14px;
            margin-right: 8px;
          }
          .icon_c {
            background-position: -160px -5px;
            width: 13px;
            height: 14px;
            margin-right: 8px;
          }
          .icon_d {
            background-position: -52px -125px;
            width: 14px;
            height: 13px;
            margin-right: 5px;
          }
          .icon_e {
            background-position: -160px -29px;
            width: 11px;
            height: 13px;
            margin-right: 8px;
          }
        }
        dd {
          color: #7d7d7d;
          font-size: 12px;
          line-height: 12px;
          padding: 8px 12px 8px 51px;
          box-sizing: border-box;
          cursor: pointer;
        }
        dd:hover {
          background: white;
          color: #2590ff;
          padding-left: 48px;
          border-left: 3px solid #2590ff;
        }
        .active_dd {
          background: white;
          color: #2590ff;
          padding-left: 48px;
          border-left: 3px solid #2590ff;
        }
      }
    }
    .right_max {
      float: right;
      width: 956px;
    }
  }
}
</style>

效果图:

image.png