考务管理系统（四）

一、Vue的 this.$ root.Bus.$on事件 的使用

作用：

前端vue项目中，各个组件（非父子关系也可）之间可以通过Bus进行事件通信。

使用步骤：

• 创建一个空实例放在根组件下，所有子组件都能调用
  
• 进过如上配置后即可在各个组件中通过如下：

this.$root.Bus.$emit("事件名", 参数1, 参数2, ...);

• 来给总线Bus发一条事件信息。

  其他组件通过如下：

this.$root.Bus.$on("事件名", 回调函数);

来监听总线Bus中的某个事件，执行回调函数了。

---

二、基于vue+elementUI实现的四级菜单 解析（多级菜单以此类推）

案例：

布局代码：

<template>
  <el-menu  :collapse="collapsed" collapse-transition router unique-opened class="el-menu-vertical-demo" background-color="rgb(45, 172, 97)" text-color="#fff" active-text-color="#ff0">
    <div class="logobox">
      <img class="logoimg" src="../../assets/images/tea.png" alt="">
    </div>
    <!-- 一级菜单 -->
    <template v-for="item in lists">
     <el-submenu v-if="item.children && item.children.length" :index="item.path" :key="item.path">
      <template slot="title"><i class="iconfont" v-if="item.id == 1">&#xe643;</i><i class="iconfont" v-else >&#xe606;</i><span>{{item.name}}</span></template>
      <!-- 二级菜单 -->
       <template v-for="itemChild in item.children">
         <el-submenu v-if="itemChild.children && itemChild.children.length" :index="itemChild.path" :key="itemChild.path">
             <template slot="title"><i :class="itemChild.icon"></i><span>{{itemChild.name}}</span></template>
            <!-- 三级菜单 -->
         <template v-for="itemChild_Child in itemChild.children">
           <el-submenu v-if="itemChild_Child.children && itemChild_Child.children.length" :index="itemChild_Child.path"    :key="itemChild_Child.path">
             <template slot="title"><i :class="itemChild_Child.icon"></i><span>{{itemChild_Child.name}}</span></template>
             <!-- 四级菜单 -->
              <el-menu-item v-for="itemChild_Child_Child in itemChild_Child.children" :index="itemChild_Child_Child.path" :key="itemChild_Child_Child.path">
               <i :class="itemChild_Child_Child.icon"></i><span slot="title">{{itemChild_Child_Child.name}}</span></el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="itemChild_Child.path" :key="itemChild_Child.path"><i :class="itemChild_Child.icon"></i><span slot="title">{{itemChild_Child.name}}</span></el-menu-item>
         </template>
         </el-submenu>
        <el-menu-item v-else :index="itemChild.path" :key="itemChild.path"><i :class="itemChild.icon"></i><span slot="title">{{itemChild.name}}</span></el-menu-item>
      </template>
    </el-submenu>
    <el-menu-item v-else :index="item.path" :key="item.path"><i :class="item.icon"></i><span slot="title">{{item.name}}</span></el-menu-item>
  </template>
  </el-menu>
</template>

数据源：

 data () {
    return {
      collapsed: false,
      lists: []
    }
  },
created () {
    const res = {
      data: [
        {
          id: '1',
          name: '教室管理',
          path: 'manageClass',
          children: [
            {
              icon: '',
              name: '全部教室',
              path: 'allRoomsInfo'
            },
            {
              icon: '',
              name: '可用教室',
              path: 'useableRoomInfo'
            }
          ]
        },
        {
          id: '2',
          name: '考试管理',
          path: 'manageExam',
          children: [
            {
              icon: '',
              name: '新增考试',
              path: 'addExam',
              children: [
                {
                  icon: '',
                  name: '考试信息录入',
                  path: 'importExamInfo'
                },
                {
                  icon: '',
                  name: '考生信息录入',
                  path: 'importStuInfo'
                }
              ]
            },
            {
              icon: '',
              name: '修改考试信息',
              path: 'modiExamInfo',
              children: [
                {
                  icon: '',
                  name: '考生信息管理',
                  path: 'manageStuInfo',
                  children: [
                    {
                      icon: '',
                      name: '查看考生信息',
                      path: 'checkStuInfo'
                    }
                  ]
                },
                {
                  icon: '',
                  name: '考场管理',
                  path: 'manageExamPlace',
                  children: [
                    {
                      icon: '',
                      name: '导出考场信息',
                      path: 'outputPlaceInfo'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
    this.lists = res.data
 }

---

三、vue中给index赋值时报Invalid prop: type check failed for prop “index”. Expected String, got Numbe

在elementUI导航组件中加入后台数据驱动循环生成导航过程中：

翻译：

解决办法：

:index="item.id+''"

即：

<el-submenu :index="item.id+''">
  <template slot="title">
    <i class="el-icon-location"></i>
    <span>{{item.name}}</span>
  </template>
</el-submenu>

---

四、elementui框架里导航菜单的default-active的作用

在elementui框架中， 有一个名字为el-menu导航菜单的空间，其中在菜单上的属性值default-active，它的说明内容为：当前激活菜单的 index

其实，即使不加这个属性，也能正常显示选中的item变亮，但是之所以要加这个属性，是为了浏览器刷新后，仍然可以定位到之前选中的路由。

如果没有多层嵌套路由的话，可以令 :default-active="$route.path", 但是如果有多层嵌套，建议在计算属性里，更新数据，如下所示：

 computed: {
            defaultActive() {
                return '/' + this.$route.path.split('/').reverse()[0];
            }

注意：

将 :default-active 设置为 $route.path，el-menu-item 的 index 设为要跳转的路由（并且点击菜单项，会直接push到点击的页面)。 一定要设置 el-submenu 的 index属性（1，2，3…）。不然会出bug !!!

---

更改三中的菜单代码如下：

---

效果图：

---

五、v-mode 提示错误 v-model directives require the attribute value which is valid as LHS.

原因：

v-model 的值只能是一个变量，是无法应用 过滤器和进行表达式判断

解决方法

对获取的数据进行提前处理：

---