Vue.component('my-tab', { props : ['list'], template : `<div> <div> <ul> <li v-for="(item, index) in list" :class="{active:selected==index, item:true}" @mouseenter="change(index)">{{item.title}}</li> </ul> </div> <div> <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功能的方式，没有说哪种方式最好，选择最适合自己项目需求的方式就是最好的。文中有哪有错误或不足，欢迎批评指正。也希望大家多多支持脚本之家。
您可能感兴趣的文章: