Vue中component标签的使用

<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="item in panes"
        :key="item.key"
        :label="item.label"
        :name="item.key"
        :disabled="item.path === 'add' ? false : $route.params.id ? false : true"
      >
      </el-tab-pane>
    </el-tabs>
    <component :is="activeName"></component>
  </div>
</template>
<script>
import stutas from "./Home.vue";
import stutas1 from "./404.vue";
export default {
  name: "notFound",
  components: {
    stutas,
    stutas1,
  },
  
  data() {
    return {
      activeName: "stutas",
      panes: [
        { label: "学员", key: "stutas" },
        { label: "学员", key: "stutas1" },
        { label: "学员", key: "stutas2" },
        { label: "学员", key: "stutas3" },
      ],
    };
  },
};
</script>