node.js--vue 切换标签

第一种搓版       父组件

<template>
  <div class="" >
  <Item txt="首页" >
    <img slot="normalImg" v-show="!isShow[0]" @click="activeBtn(0)" src="../assets/1.png"/>
    <img slot="activeImg" v-show="isShow[0]" @click="activeBtn(0)" src="../assets/6.png"/>
  </Item>

    <Item txt="搜索" @click="activeBtn(1)">
      <img slot="normalImg" v-show="!isShow[1]" @click="activeBtn(1)" src="../assets/2.png"/>
      <img slot="activeImg" v-show="isShow[1]" @click="activeBtn(1)" src="../assets/7.png"/>
    </Item>

    <Item txt="积分" @click="activeBtn(2)">
      <img slot="normalImg" v-show="!isShow[2]" @click="activeBtn(2)" src="../assets/3.png"/>
      <img slot="activeImg" v-show="isShow[2]" @click="activeBtn(2)" src="../assets/8.png"/>
    </Item>

    <Item txt="购物车" @click="activeBtn(3)">
      <img slot="normalImg" v-show="!isShow[3]" @click="activeBtn(3)" src="../assets/4.png"/>
      <img slot="activeImg" v-show="isShow[3]" @click="activeBtn(3)" src="../assets/9.png"/>
    </Item>

    <Item txt="我的考拉" @click="activeBtn(4)">
      <img slot="normalImg" v-show="!isShow[4]" @click="activeBtn(4)" src="../assets/5.png"/>
      <img slot="activeImg" v-show="isShow[4]" @click="activeBtn(4)" src="../assets/10.png"/>
    </Item>

</div>
</template>
<script>
  import Item from './item'
  export default {
    data:function(){
     return{
       aa:[],
       isShow:[true,false,false,false,false]
     }
    },
    components: {
      Item:Item,
    },
    methods:{
      activeBtn:function (index) {
       this.isShow=[];
       for (var i=0;i<5;i++){
         this.aa[i]=false;
       } ;
       this.aa[index]=true;
       this.isShow=this.aa;
      }
    }
  }
</script>
<style>

</style>

子组件

<template>
    <div >
      <span>{{txt}}</span>
       <slot name="normalImg"></slot>
       <slot name="activeImg"></slot>
    </div>
</template>
<script>
  export default {
    props:["txt"],
  }
</script>
<style>

</style>

第二种加强版 父子传值

父组件

<template>
  <div style="display: inline-block">
    <Item1 txt="首页" mark="1" :sel="selected" @change="getVal">
      <img slot="normalImg"  src="../assets/1.png"/>
      <img slot="activeImg"  src="../assets/6.png"/>
    </Item1>
    <Item1 txt="搜索" mark="2" :sel="selected" @change="getVal">
      <img slot="normalImg"  src="../assets/2.png"/>
      <img slot="activeImg"  src="../assets/7.png"/>
    </Item1>
    <Item1 txt="积分" mark="3" :sel="selected" @change="getVal">
      <img slot="normalImg"  src="../assets/3.png"/>
      <img slot="activeImg"  src="../assets/8.png"/>
    </Item1>
    <Item1 txt="购物车" mark="4" :sel="selected" @change="getVal">
      <img slot="normalImg"  src="../assets/4.png"/>
      <img slot="activeImg"  src="../assets/9.png"/>
    </Item1>
    <Item1 txt="我的考拉" mark="5" :sel="selected" @change="getVal">
      <img slot="normalImg"  src="../assets/5.png"/>
      <img slot="activeImg"  src="../assets/10.png"/>
    </Item1>
  </div>
</template>
<script>
  import Item from './item2'
  export default {
    components:{
      Item1:Item,
    },
    data:function () {
      return{
        selected:1
      }
    },
    methods:{
      getVal:function (val) {
        this.selected=val;
      }
    }
  }
</script>

子组件

<template>
  <div @click="fn" >
    <span>{{txt}}</span>
      <span v-show="!bol"> <slot name="normalImg" ></slot></span>
      <span v-show="bol"> <slot name="activeImg" ></slot></span>

  </div>
</template>
<script>
  export default {
    props:['txt','mark','sel'],
    computed:{
      bol:function () {
        if (this.mark==this.sel){
          return true;
        } else {
          return false
        }
      }
   },
    methods:{
      fn:function () {
        console.log(this.mark);
        this.$emit("change",this.mark)
      }
    },

  }
</script>