使用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。