vue项目中tab切换和自定义组件的使用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目中tab切换和自定义组件的使用相关的知识,希望对你有一定的参考价值。
参考技术A 使用tab切换调用组件,若是多个组件,自然没啥问题,但是若是重复调用同一个组件,则会出现数据冲突的问题,所以在这里我使用<component/>来进行组件的调用。如此,你每次点击切换tab的时候,组件都会进行重置数据
vue-music 关于基础组件 (Tab组件)
定义在项目的基础组类别的 tab组件中,定义一个tab切换数量的数组 和一个currentIndex 当前高亮索引 的props,当前高亮(active)的类等于currentIndex === index 当前循环的索引值,增加点击派发事件传入index 索引参数,
调用组件的页面接受派发事件点击的index 索引,底下的内容根据this.currentIndex 的值v-if 显示隐藏
tab组件
<template> <ul class="switches"> <li class="switch-item" v-for="(item,index) in switches" :class="{‘active‘:currentIndex === index}" @click="switchItem(index)"> <span>{{item.name}} </span> </li> </ul> </template> <script type="text/ecmascript-6"> export default { props: { switches: { type: Array, default: [] }, currentIndex: { type: Number, default: 0 } }, methods: { switchItem(index) { this.$emit(‘switch‘, index) } } } </script>
调用
<switches :switches="switches" :currentIndex="currentIndex" @switch="switchItem"></switches>
data() {
return {
currentIndex: 0,
switches: [
{
name: ‘最近播放‘
},
{
name: ‘搜索历史‘
}
]
}
},
switchItem(index) {
this.currentIndex = index
},
以上是关于vue项目中tab切换和自定义组件的使用的主要内容,如果未能解决你的问题,请参考以下文章