vue之Tab切换组件

代码如下（示例）：

1、方式一

代码如下（示例）：

	//头部切换
   <ul class="tab-tilte">
        <li :class="{active:index===cur}"
            v-for="(item,index) in tabList"
            :key="index"
            @click="toggleTab(index)">{{item.name}}</li>
   </ul>
    
    //内容组件
    <div v-show="cur==0">
        <complainExamine></complainExamine>
    </div>
    <div v-show="cur==1">
        <complainSingle></complainSingle>
    </div>
    <div v-show="cur==2">
        <receivingRecord></receivingRecord>
    </div>

import complainSingle from '@/views/components/complainSingle'	import receivingRecord from '@/views/components/receivingRecord'
import complainExamine from '@/views/components/complainExamine'

export defaylt {
  components: {
    complainSingle,
    receivingRecord,
    complainExamine
  },
  data(){
  	cur:0,
  	 tabList: [
        {
          name: '刘'
        },
        {
          name: '哈'
        },
        {
          name: '哈'
        }
      ]
  },
  methods:{
	 toggleTab(index) {
      this.cur = index
    },		
  }
}
方式一的原文链接：https://www.cnblogs.com/xhrr/p/11201939.html

2.方式二

代码如下（示例）：

	//头部切换
	 <ul>
        <li v-for="(item,index) in tabLable"
            :key="index"
            @click="handleToggle(item,index)"
            :class="{active:active===index}">
          {{item.label}}
        </li>
    </ul>
    // :is实现多个组件实现同一个挂载点、切换内容 
    <component :is="currentView"
               @close="$emit('close')"
               @success="submitFormData">
    </component>
  import liuTab from '../components/liuTab'
  import huiTab from '../components/huiTab'
  import minTab from '../components/minTab'
  export default{
  	 components: {
	  	liuTab,
	  	huiTab,
	  	minTab
 	 },
 	 data(){
 	 	  currentView: 'liuTab',
 	 	  active: 0,
 	 	  tabLable: [
	        {
	          label: '刘呵呵',
	          component: 'liuTab'
	        },
	        {
	          label: '哈嘻嘻',
	          component: 'huiTab'
	        },
	        {
	          label: '哈哈哈',
	          component: 'minTab'
	        },
      ],
 	 },
 	 methods:{
		handleToggle(item, index) {
	      this.active = index
	      this.currentView = item.component
	    },		
	 }
	}
方式二的原文连接：https://www.cnblogs.com/sunjuncoder/p/9897491.html

---