详解使用vue实现tab 切换操作

</template>
<template slot="content" scope="props">
<div v-html="props.content"></div>
</template>
</my-slot-tab>

父组件中

slot="title"

会替换子组件中

name="title"

的slot，父组件中

slot="content"

会替换子组件中

name="content"

的slot.最终渲染出来的tab结构与上面之前的代码一样。

3.2 其他组件方式

还有一种方式就是把所有的模板都写到组件中。

子组件：

Vue.component('my-tab', {
 props : ['list'],
 template : `<div class="tab">
     <div class="hd">
      <ul class="clearfix">
       <li v-for="(item, index) in list" :class="{active:selected==index, item:true}" @mouseenter="change(index)">{{item.title}}</li>
      </ul>
     </div>
     <div class="bd">
      <div v-for="(item, index) of list" :class="{active:selected==index, item:true}" v-html="item.content"></div>
     </div>
    </div>`,
 data(){
  return{
   selected:0
  }
 },
 methods : {
  change(index){
   this.selected = index;
  }
 }
});

父组件：

<my-tab :list="list"></my-tab> 

 这种只需要传递一个list即可。

对比这两种方法，slot中可以自定义更多的内容，而下面的方法使用起来更加简单，只是自定义的东西比较少。

4. 总结

上面讲解了几种实现tab功能的方式，没有说哪种方式最好，选择最适合自己项目需求的方式就是最好的。文中有哪有错误或不足，欢迎批评指正。也希望大家多多支持软件开发网。