vue 共用的TagType组件折腾小记

前沿：

一个tap页点击切换的共用的组件。如图所示：

step1:新建一个tapTag.vue,内容如下

<template>
    <div class="TagTypeMoudle">
        <span class="flagButton"
              v-for="(item,index) in UnderTheFlagType"
              v-bind:key="index"
              @click="flagButton(index,item)"
              :class="{'flagButtonClick':isClickFlag == index}">{{item}}</span>
    </div>
</template>
<script>
export default {
  //父组件传过来的有几个tag以及tag上的文字。
    props:['UnderTheFlagType'],
    data(){
        return{
        isClickFlag:0,
        }
    },
      methods: {
      flagButton(index,item){
         this.isClickFlag = index;
        //  发射到父组件的方法，在父组件内可以触发该方法  
         this.$emit('FlagtoFather',item);
      }
  }
};
</script>
<style lang="scss" scoped>
@import "../../styles/myBase.scss";
.TagTypeMoudle {
  width: 100%;
  height: 50px;
  text-align: center;
  .flagButton {
    display: inline-block;
    width: 84px;
    height: 30px;
    line-height: 30px;
    background: #f3f3f3;
    font-size: 12px;
    color: #797979;
    border-radius: 2px;
    margin-right: 5px;
  }
  .flagButton:hover {
    background: $HomeBgColor;
    color: #ffffff;
    cursor: pointer;
  }
  .flagButtonClick {
    background: $HomeBgColor;
    color: #ffffff;
  }
}
</style>

step2:在需要引用的页面引入即可

<template>
     <tagType :UnderTheFlagType="UnderTheFlagType"
               v-on:FlagtoFather="fromFlag"></tagType>
</template>
import tagType from '@/components/TagType/index';
import { getFundCompanyFundPerformance } from '@/api/basicManage';
export default {
  components: {
    tagType
  },
  data() {
    return {
      //控制tag的文字以及数量  
      UnderTheFlagType: [
        '股票型',
        '混合型',
        '债券型',
        '货币型',
        'QDII',
        '其他'
      ],
    }
  },
methods:{
//在此触发子组件内的事件。
   fromFlag(item) {
      console.log(item)
}
}

结束：至此，一个闭合的公用tag组件就可以使用了，希望伙伴们多多指教