自定义tabs切换组件

//子组件
// 注册全局组件
import Tabs from '@/components/Tabs'
//全局组件挂载
Vue.component('Tabs', Tabs)
// 
<template>
  <div class="tabs">
    <div class="tabsName">
      <span>选择场地:</span>
      <button
        v-for="(tab, key) in tabs"
        :key="key"
        :class="{ active: key == index }"
        type="button"
        @click="index = key"
      >
        {{ tab }}
      </button>
    </div>
    <ul>
      <div>选择时间段:</div>
      <template v-for="(item, key) in contents">
        <li
          v-if="item.orderFieldList[0].isOrder == 1"
          :key="key"
          :class="box.includes(item) ? 'liActive' : 'trueOrder'"
          @click="change(item)"
        >
          <div class="timebox">
            <span :class="box.includes(item) ? 'isPrice' : 'price'">
              {{ item.hourStart }}~{{ item.hourEnd }}
            </span>
            <span :class="box.includes(item) ? 'isPrice fw' : 'price fw'">
              ¥{{ item.orderFieldList[0].fieldPrice }}
            </span>
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['tabs', 'contents', 'fatherlist'],
  data() {
    return {
      index: 0,
      box: []
    }
  },
  methods: {
    change: function (e) {
      console.log('1111111111')
      console.log(e)
      if (this.box.includes(e)) {
        this.box.splice(this.box.indexOf(e), 1)
      } else {
        // 把点击的元素item放入box数组中
        this.box.push(e)
        this.$emit('childByValue', this.box)
        console.log(this.box)
        console.log('-------------')
        const list = this.fatherlist
        console.log(list)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  margin-top: 25px;
  background: #f8f8f8;
}
.tabsName {
  border-bottom: 1px solid #ebecef;
  margin-bottom: 20px;
  padding: 20px 10px 0px 10px;
}
.tabs button {
  width: 80px;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  background: #ffffff;
  box-sizing: border-box;
  border-radius: 4px;
  margin: 5px 7px 20px 7px;
  color: #37425b;
  font-size: 14px;
  height: 30px;
  line-height: 15px;
}
.tabs button:hover {
  border: 1px solid #5e6bdf;
  color: #5e6bdf;
  background: #ffffff;
}
.tabs button.active {
  border: 1px solid #5e6bdf;
  color: #5e6bdf;
  background: #ffffff;
}
.tabs ul {
  padding: 10px 10px 20px 10px;
}
.tabs li {
  display: inline-block;
  width: 137px;
  height: 36px;
  list-style-type: none;
  margin: 6px;
  // border: 1px solid #ccc;
  padding: 7px 5px 7px 5px;
  line-height: 23px;
  text-align: center;
}
.price {
  font-weight: 400;
  font-size: 14px;
  color: #333;
  margin-right: 4px;
  cursor: pointer;
}
.fw {
  font-weight: 600 !important;
}
.isPrice {
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  margin-right: 4px;
  cursor: pointer;
}
.trueOrder {
  background: #fff;
}
.isOrder {
  background: #ebecef;
}
.liActive {
  background: #5e6bdf;
  color: #fff;
}
</style>

父引入子组件

<el-form-item
          v-if="form.reserveType == 1 && form.detailAddDtoS.reserveDate"
          label="预订场次"
          prop="payType"
        >
          <Tabs
            ref="child"
            :contents="contents"
            :fatherlist="childrenList"
            :tabs="tabs"
            @childByValue="childByValue"
          />
        </el-form-item>

        <el-form-item
          v-if="form.reserveType == 1 && form.detailAddDtoS.reserveDate"
          label="已选场次"
          prop="payType"
        >
          <div class="reservebox">
            <ul>
              <li v-for="(item, idx) in childrenList" :key="idx">
                <div class="listbox">
                  <span>{{ item.orderFieldList[0].fieldName }}</span>
                  <span>{{ item.hourStart }}~{{ item.hourEnd }}</span>
                  <span @click="closeClick(item)">
                    <img src="../../../../assets/images/icon_close.png" />
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </el-form-item>



// x关闭
    closeClick(item) {
      this.$refs.child.change(item)
    },
    // 组件接受值
    childByValue(childValue) {
      console.log(childValue)
      this.childrenList = childValue
      // this.detailField = _.map(childValue, 'fieldId')
    },