动态组件Tab切换

<template>
  <div>
    <tab :line-width="1" custom-bar-width="24px" class="container">
      <tab-item selected class="item" @on-item-click="handleShowQueueUp">排队</tab-item>
      <tab-item class="item" @on-item-click="handleShowSubscribe">预约</tab-item>
    </tab>
    <component
      v-bind:is="showQueueUp"
      :queueList="queueList"
      :subscribe="subscribe"
      @addQueue="getCarQueueUpList"
      class="queue"
    ></component>
  </div>
</template>
<script>
import { Tab, TabItem } from "vux";
import QueueList from "./components/QueueUpList";
import Subscribe from "./components/SubscribeList";
export default {
  name: "Queue",
  components: {
    Tab,
    TabItem,
    QueueList,
    Subscribe
  },
  data() {
    return {
      showQueueUp: QueueList,
      queueList: [],
      subscribe: []
    };
  },
  methods: {
    handleShowQueueUp() {
      this.showQueueUp = QueueList;
    },
    handleShowSubscribe() {
      this.showQueueUp = Subscribe;
    },
    }
  },
  }
};
</script>
<style scoped lang="less">
.item {
  background-size: 100% 0px !important;
}
.container {
  position: fixed;
  width: 100%;
  background: white;
  top: 0;
  left: 0;
  z-index: 2;
}
.queue {
  margin-top: 60px;
}
</style>