Vue--项目开发之实现tabbar功能来学习单文件组件2

上一篇文章里item.vue里的span标签内容是写死了，但是我们不希望写死

所以对于五个tab选项的标题需要从外部传入，也就说

需要在item.vue里的script里写上

export default {
    props:['txt']
}
这里我定义了txt作为外部接收标题的标志
然后在span标签里写

<span>{{txt}}</span>

再接着：去到helloworld.vue文件里可以将div改写如下：

<div class="tabbar">
    <item txt="首页"></item>
    <item txt="分类"></item>
    <item txt="发现"></item>
    <item txt="购物车"></item>
    <item txt="我的考拉"></item>
</div>
这样就可以通过父组件传递txt内容到子组件item文件里了


然后我们还要将选项对应的图片也有外部传递不写死

<span v-show="bol"><slot name="normalimg"></slot><br/></span>
<span v-show="!bol"><slot name="activeimg"></slot><br/></span>
在item.vue里的div里写上两个具名槽口，这样方便父组件里传递点击和未点击的两种图片
接着就是通过v-show指令来控制显隐两种图片，bol参数需要在script里定义

export default {
    props:['txt'],
    data:function () {
      return{
          bol:false
      }
    }
}
最后在父组件里就要调用槽口来传递图片了

<div class="tabbar">
    <item txt="首页">
      <img src="../assets/img/hot5.gif" alt="" slot="normalimg"/><br/>
      <img src="../assets/img/hot6.gif" alt="" slot="activeimg"/><br/>
    </item>
    <item txt="分类">
      <img src="../assets/img/hot5.gif" alt="" slot="normalimg"/><br/>
      <img src="../assets/img/hot6.gif" alt="" slot="activeimg"/><br/>
    </item>
    <item txt="发现">
      <img src="../assets/img/hot5.gif" alt="" slot="normalimg"/><br/>
      <img src="../assets/img/hot6.gif" alt="" slot="activeimg"/><br/>
    </item>
    <item txt="购物车">
      <img src="../assets/img/hot5.gif" alt="" slot="normalimg"/><br/>
      <img src="../assets/img/hot6.gif" alt="" slot="activeimg"/><br/>
    </item>
    <item txt="我的考拉">
      <img src="../assets/img/hot5.gif" alt="" slot="normalimg"/><br/>
      <img src="../assets/img/hot6.gif" alt="" slot="activeimg"/><br/>
    </item>
</div>

转载于:https://www.cnblogs.com/YKingcc/p/8491232.html