el-tabs和＜component＞配合，实现tab栏的切换效果

component 标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。标签里的is属性值是对应的组件名称。
component标签详细使用方法：https://blog.csdn.net/liangmengbk/article/details/85013547
是element的ui组件，通过@tab-click方法，改变is的值`

<template>
  <div class="tabBox">
    <el-tabs v-model="val" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in tabList"
        :key="index"
        :label="item.name"
        :name="item.label"
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    tabList: {
      type: Array,
      default() {
        return [];
      }
    },
    radio: String
  },
  data() {
    return {
      val: this.radio
    };
  },
  watch: {
    radio(newVal) {
      // console.log("我被监听了", newVal);
      this.val = newVal;
    }
  },
  methods: {
    // handleRadioChange(val) {
    //   this.$emit("changeTab", val);
    // },
    handleClick(tab) {
      // console.log("tab", tab);
      this.$emit("changeTab", tab.name);
    }
  }
};
</script>

`

这样就实现类似css切换的效果，不用v-if或路由