vue2组件通信案例：tab栏

App.vue

<template>
  <div>
    <tab-bar :tabTitle="tabTitle" @showContent="showContent">tab-bar>

    
    <h1>{{ tabContent[curIndex] }}h1>
  div>
template>

<script>
import TabBar from './components/TabBar.vue'

export default {
  components: { TabBar },
  data() {
    return {
      tabTitle: ['tabl1', 'tabl2', 'tabl3'],
      tabContent: ['AAA', 'BBB', 'CCC'],
      curIndex: 0
    }
  },
  methods: {
    showContent(index) {
      this.curIndex = index
    },
  },
}
script>

<style scoped>style>

TabBar.vue

<template>
  <div>
    <header>
      <div class="tabItem" v-for="(item, index) in tabTitle" :key="item" @click="handleClick(index)"
        :class="{ active: curIndex === index }">{{ item }}div>
    header>
  div>
template>

<script>
export default {
  data() {
    return {
      curIndex: 0
    }
  },
  props: ['tabTitle'],
  emits: ['showContent'],
  methods: {
    handleClick(index) {
      this.curIndex = index

      // 抛出自定义事件，将参数下标index传递给父组件
      this.$emit('showContent', index)
    }
  }
}
script>

<style scoped lang="less">
header {
  display: flex;
  text-align: center;

  .tabItem {
    flex: 1;
    border: 1px solid #000;
  }
}

.active {
  color: pink;
}
style>