vue项目 封装tab切换组件

1.父组件对封装好的子组件的使用方式

<template>
 <div class="card_class">
      <title-tabs
         style="margin-top: 4.07vh; margin-bottom: 2vh"
         title="个体背景分析"
         :dataList="tabs"
         @on-change="getChangeVal"
       ></title-tabs>
            </div>
            </template>
	<script>
	import titleTabs from "@/components/titleTabs/title-tabs"; 
	export default {
	data(){
	return{
	id:'',
	changName :'',
	 tabs: [
        {
          regionName: "婚姻状态",
          value: 0,
        },
        {
          regionName: "收入水平",
          value: 1,
        },
        {
          regionName: "教育程度",
          value: 2,
        },
        {
          regionName: "职业",
          value: 3,
        },
      ],
	}
	},
	  getChangeVal(val) {
      console.log(val);
      this.id = val.value;
      this.changName = val.regionName;
      this.getPeopleList();
    },
	components:{
	  titleTabs,
	</script>

2.子组件封装的代码

<template>
  <div
    class="title-tabs"
    style="
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;  
    "
  >
    <span class="title-tabs_title" v-if="title">
      {{ title ? title : "" }}
    </span>
    <div class="card-tab selfTab" style="margin-top: 0">
      <span
        v-for="(item, index) in dataList"
        :key="index"
        :class="tabsIndex == index ? 'active' : ''"
        @click="toggleTabs(index,item)"
        >{{ item.regionName }}</span
      >
    </div>
     <!-- <div class="card-tab selfTab" style="margin-top: 0">
      <span
        v-for="(item, index) in infolist"
        :key="index"
        :class="tabsIndex == index ? 'active' : ''"
        @click="toggleTable(index,item)"
        >{{ item.name }}</span
      >
    </div> -->
  </div>
</template>
<script>
export default {
  name: "title-tabs",
  data() {
    return {
      tabsIndex: 0,
    };
  },
  props: {
    title: String,
    dataList: Array,
    infolist:Array,
  },
  mounted() {},
  methods: {
    toggleTabs(index,item) {
      this.tabsIndex = index;
      this.$emit("on-change", item);
    },
      toggleTable(index,item) {
      this.tabsIndex = index;
      this.$emit("on-changeInfo", item);
    }, 
  },
};
</script>
<style scoped lang='scss'>
.selfTab {
  span {
    margin-left: 0.1rem;
    &:first-child {
      margin-left: 0;
    }
  }
}
.title-tabs {
  &_title {
    font-size: 0.2rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    line-height: 0.2rem;
  }
}
.card-tab {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

  justify-content: space-between;

  margin-top: 2.31vh;
  span {
    background: rgba(255, 255, 255, 0.38);
    border-radius: 0.04rem;
    padding: 0.06rem 0.12rem;
    font-size: 0.18rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    line-height: 0.18rem;
    &.active {
      background: linear-gradient(0deg, #2093f7, #00bbff);
    }
  }
}
</style>