<template>
  <div class="side-bar-item" v-if="itemData.meta.inSideBar">

    <!-- 有子菜单 -->
    <child-item v-if="itemData.children && itemData.children.length" :key="itemData.path" :children="itemData"></child-item>

    <!-- 无子菜单 -->
    <el-menu-item v-else :key="itemData.path" :index="itemData.path">
      <template slot="title">
        <div class="menu-item-title">
          <img :src="require(`@/${itemData.meta.icon}`)" alt="" v-if="itemData.meta.icon">
          <span>{{itemData.meta.title}}</span>
        </div>
      </template>
    </el-menu-item>

  </div>
</template>
<script>
import ChildItem from "@/components/ChildItem";
export default {
  name: "sideBarItem",
  components: {
    ChildItem
  },
  props: {
    itemData: {
      type: Object,
    }
  },
  data() {
    return {

    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {

  },
}
</script>
<style lang="scss" scoped>

</style>
