vue 组件分享

应用场景是tab切换，上方显示五个标题，下方区域显示各模块内容

分享的原因是这个写法简介

父组件如下：

<template>
 <Tabs v-model="selected" @on-click="change_item">
      <TabPane
        v-for="item in list_tab"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      ></TabPane>
    </Tabs>
<div>
<!--    is 对应的组件名称  下面是传值-->
      <component
        :is="selected"  
        :level-year="selectLevelYear"
        :current-level-year="currentLevelYear"
      ></component>
    </div>

</template>
<script>
import { school_list_cyear } from "@/api/cloud_analyze.js";
import analyze_school from "./analyze_school";
import analyze_resource from "./analyze_resource";
import analyze_task from "./analyze_task";
import analyze_classroom from "./analyze_classroom";
import analyze_application from "./analyze_application";
export default {
  components: {
    analyze_school,
    analyze_resource,
    analyze_task,
    analyze_classroom,
    analyze_application
  },
 data() {
    return {
      // 选中学年
      selectLevelYear: null,
      // 当前学年
      currentLevelYear: null,
      selected: "analyze_school",
      list_tab: [
        {
          label: "学校统计",
          name: "analyze_school"
        },
        {
          label: "资源统计",
          name: "analyze_resource"
        },
        {
          label: "作业统计",
          name: "analyze_task"
        },
        {
          label: "课堂统计",
          name: "analyze_classroom"
        },
        {
          label: "应用统计",
          name: "analyze_application"
        }
      ]
    };
  },
 methods: {
    // 统计切换
    change_item(name) {
      this.selected = name;
    }
  }
};
</script>

子组件任意一个

其他都一样，只显示一下传值
<script>
export default {
  props: ["levelYear", "currentLevelYear"]
}
</script>