vue自定义组件页面以及导入组件页面

1.其他页面中控件导入

          <el-menu   active-text-color="blue" class="el-menu-demo"  @select="handleSelect" mode="horizontal" unique-opened :default-active="$route.path" :collapse="isCollapse">
            <VerticlebarItem :routes="permission_routers"></VerticlebarItem>自定义的组件，permission_routers是参数
          </el-menu>

2.js

 import {mapGetters} from 'vuex' 获取参数的js导入
 import VerticlebarItem from './components/VerticlebarItem' 导入组件
 export default {
   name: 'layout',
   components: {
     Navbar,
     Sidebar,
     AppMain,
     HeadBar,
     VerticlebarItem  导出
   },

   computed: {
     ...mapGetters([新的js方法
       'permission_routers',参数获取，是从后台接口得到的权限数据
       'sidebar'
     ]),

3.组件页面

<template>组件内容
  <div class="menu-wrapper">
    //对routes对象循环遍历
    <template v-for="item in routes" v-if="!item.hidden&&item.children">
    //第一种情况
      <router-link v-if="item.children.length===1 && !item.children[0].children" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
        <el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
          <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
          <span v-if="item.children[0].meta&&item.children[0].meta.title">{{item.children[0].meta.title}}</span>
        </el-menu-item>
      </router-link>
      //第二种情况有孩子
      <el-submenu class="sub"  enu v-else :index="item.name||item.path" :key="item.name" style="float:left">
        <template slot="title">
          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
          <span v-if="item.meta&&item.meta.title">{{item.meta.title}}</span>
        </template>
        <template v-for="child in item.children" v-if="!child.hidden">
          <sidebar-item class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
          <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
            <el-menu-item :index="item.path+'/'+child.path">
              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
              <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
            </el-menu-item>
          </router-link>
        </template>
      </el-submenu>
    </template>

  </div>
</template>


<script>

export default {
  name: 'VerticlebarItem', 导出的名字
  props: { 参数名字赋值
    routes: {  参数
      type: Array
    }
  },
  methods: {
  },

  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
};
</script>
<style>
.sub{
  margin-right: 100px;
}
</style>