使用eventBus解决兄弟组件通信问题

使用eventBus解决兄弟组件通信问题

问题是有两个兄弟组件，第一个组件显示分类表，第二个组件显示详情表，点击分类表跳转到详情表，此时需要将数据传送过去，因为我的数据是一次性请求的，详情表在children里。
在Category.vue中：

<template>
<table id="level1-table" class="table table-bordered table-hover">
          <thead>
          <tr>
            <th>route</th>
            <th>routenm</th>
            <th>routedesc</th>
            <th>routeflag</th>
            <th>routestat</th>
            <th>isnnum</th>
            <th>scrap_cnt_limit</th>
            <th>repmis_cnt_limit</th>
            <th class="operation">操作</th>
          </tr>
          </thead>

          <tbody>
          <tr v-for="category in level1.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="category.route">
            <td @click="onClickLevel1(category)" :class="{'active' : category.route === active.route}">{{category.route}}</td>
            <td @click="onClickLevel1(category)" :class="{'active' : category.route === active.route}">{{category.routenm}}</td>
            <td @click="onClickLevel1(category)" :class="{'active' : category.route === active.route}">{{category.routedesc}}</td>
            <td @click="onClickLevel1(category)" :class="{'active' : category.route === active.route}">{{category.routeflag}}</td>
            <td @click="onClickLevel1(category)" :class="{'active' : category.route === active.route}">{{category.routestat}}</td>
            <td @click="onClickLevel1(category)" :class="{'active' : category.route === active.route}">{{category.isnnum}}</td>
            <td @click="onClickLevel1(category)" :class="{'active' : category.route === active.route}">{{category.scrap_cnt_limit}}</td>
            <td @click="onClickLevel1(category)" :class="{'active' : category.route === active.route}">{{category.repmis_cnt_limit}}</td>
            <td class="operation">
              <!-- <div class="hidden-sm hidden-xs btn-group">
                <button v-on:click="edit(category)" class="btn btn-xs btn-info">
                  <i class="ace-icon fa fa-pencil bigger-120"></i>
                </button>
                <button v-on:click="del(category.route)" class="btn btn-xs btn-danger">
                  <i class="ace-icon fa fa-trash-o bigger-120"></i>
                </button>
              </div> -->
              <div class="hidden-sm hidden-xs btn-group">
              <!--修改按钮-->
              <update-route-form @onSubmit="all()" ref="updateRoute" :currentRoute="category.route" class="updateRouteClass"></update-route-form>
              <!--添加按钮-->
              <add-step-form @onSubmit4="all()" ref="add2" :currentRoute="category.route"></add-step-form>
              <!-- <el-button type="text" @click="toogleExpand(scope.row)" size="mini">{{scope.row.expansion ? '收起' : '查看详情'}}</el-button> -->
              <!--删除按钮-->
              <!-- <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
                <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
              </el-tooltip> -->
              </div>
            </td>
          </tr>
          </tbody>
        </table>
        <!--分页区域-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.level1.length">
        </el-pagination>
</template>    
<script>
import Tool from '../../plugins/tool'
import Loading from '../../../public/static/js/loading'
import Validator from '../../plugins/validator'
import Toast from '../../plugins/toast'
import Confirm from '../../plugins/confirm'
import eventBus from '@/assets/js/eventBus'
import SearchBar from './SearchBar'
import AddRouteForm from './AddRouteForm'
import UpdateRouteForm from './UpdateRouteForm'
import AddStepForm from './AddStepForm'

export default {
  name: 'Category',
  components: { SearchBar, AddRouteForm, UpdateRouteForm, AddStepForm },
  data () {
    return {
      category: {},
      categorys: [],
      level1: [],
      level2: [],
      active: {},
      // 当前的页数
      currentPage: 1,
      pagesize: 2,
      currentRoute: ''
    }
  },
  mounted () {
    // const _this = this
    this.all()
    // sidebar激活样式方法一
    // this.$parent.activeSidebar("business-category-sidebar");
  },
  destroyed () {
    eventBus.$emit('categorySaid', this.level2)
  },
  all () {
      const _this = this
      // Loading.show()
      this.$axios.get('/route1s').then(resp => {
        _this.categorys = resp.data
        // 将所有记录格式化成树形结构
        _this.level1 = []
        _this.level1 = _this.categorys
        _this.level2 = []
        // 对当前一级分类中选中的表格触发一次点击事件，以刷新二级菜单列表
        // 注意：界面的渲染需要等vue绑定好变量后才做，所以加延时100ms
        setTimeout(function () {
          $('td.active').trigger('click')
        }, 100)
      })
    },
    onClickLevel1 (category) {
      const _this = this
      _this.active = category
      _this.level2 = category.children
      // this.$bus.$emit('categorySaid', _this.level2)
      // eventBus.$emit('categorySaid', _this.level2)
      this.$router.push('/categoryStep')
      // alert('sss')
    },
    // 监听 pagesize 改变的时间
    handleSizeChange (pagesize) {
      this.pagesize = pagesize
    },
    // 监听 页码值 改变的条件
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.getRoute1List()
    }    

导入eventBus,import eventBus from ‘@/assets/js/eventBus’,然后在destroyed()方法中写eventBus.$emit(‘categorySaid’, this.level2),点击行的同时将category的children赋给level2数组，并在组件摧毁时将level2发送给兄弟组件CategoryStep.vue。
CategoryStep.vue：

<template>
	<table id="level2-table" class="table table-bordered table-hover">
          <thead>
          <tr>
            <th>ridx</th>
            <th>rtype1</th>
            <th>rtype2</th>
            <th>rtype3</th>
            <th>step</th>
            <th>mstep</th>
            <th>ostep</th>
            <th>section</th>
            <th>grp</th>
            <th>stepflag</th>
            <th>status</th>
            <th>sidx</th>
            <th>stepnm</th>
            <th>tokp</th>
            <th>steptime</th>
            <th>sectime</th>
            <th>steptimea</th>
            <th>sectimea</th>
            <th>stepstay</th>
            <th>lowsteptime</th>
            <th>操作</th>
          </tr>
          </thead>

          <tbody>
          <tr v-for="category in stepMessage.slice((currentPage2-1)*pagesize2,currentPage2*pagesize2)" :key="category.step">
            <td>{{category.ridx}}</td>
            <td>{{category.rtype1}}</td>
            <td>{{category.rtype2}}</td>
            <td>{{category.rtype3}}</td>
            <td>{{category.step}}</td>
            <td>{{category.mstep}}</td>
            <td>{{category.ostep}}</td>
            <td>{{category.section}}</td>
            <td>{{category.grp}}</td>
            <td>{{category.stepflag}}</td>
            <td>{{category.status}}</td>
            <td>{{category.sidx}}</td>
            <td>{{category.stepnm}}</td>
            <td>{{category.tokp}}</td>
            <td>{{category.steptime}}</td>
            <td>{{category.sectime}}</td>
            <td>{{category.steptimea}}</td>
            <td>{{category.sectimea}}</td>
            <td>{{category.stepstay}}</td>
            <td>{{category.lowsteptime}}</td>
            <td>
              <div class="hidden-sm hidden-xs btn-group">
                <button v-on:click="edit(category)" class="btn btn-xs btn-info">
                  <i class="ace-icon fa fa-pencil bigger-120"></i>
                </button>
                <button v-on:click="del(category.step)" class="btn btn-xs btn-danger">
                  <i class="ace-icon fa fa-trash-o bigger-120"></i>
                </button>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
        <!--分页区域-->
              <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="currentPage2"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="pagesize2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="stepMessage.length">
              </el-pagination>
</template>

<script>
import Tool from '../../plugins/tool'
import Loading from '../../../public/static/js/loading'
import Validator from '../../plugins/validator'
import Toast from '../../plugins/toast'
import Confirm from '../../plugins/confirm'
import eventBus from '@/assets/js/eventBus'

export default {
  name: 'CategoryStep',
  data () {
    return {
      category: {},
      categorys: [],
      level1: [],
      level2: [],
      active: {},
      stepMessage: [],
      currentPage2: 1,
      pagesize2: 2
    }
  },
  created () {
    eventBus.$on('categorySaid', message => {
      this.stepMessage = message
      // console.log(this.stepMessage)
    })
  },

在CategoryStep.vue创建的时候，用

eventBus.$on('categorySaid', message => {
      this.stepMessage = message
      // console.log(this.stepMessage)
    })
  }

来监听，然后传送给stepMessage。