我在项目中,遇到一个tabs下放了两个组件,组件1是拓扑图,组件2是详情,我要点击组件1中拓扑图的节点跳转到组件2的详情中,于是就有了如下图所示的需求:
简单的实现思路就是,点击按钮的时候,子组件向父组件传递tabs想要跳转页面的name,即可实现效果,项目具体实现结构如下图所示:
注:主要实现是红色标记的部分
简单代码如下:
父组件:
<template>
<div class="app-container">
<el-tabs ref="tabs" v-model="activeName" type="card" @tab-click="tabClick">
<el-tab-pane label="拓扑图" name="topo" >
<server-topo ref="topoCanvas" :data-topo="dataTopo" :links="links" @updateActiveName="updateActiveName"></server-topo>
</el-tab-pane>
<el-tab-pane label="详细信息" name="serverInfo">
<server-detail ref="ServerDetail" :server-info-list="serverInfoList"/>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script type="text/jsx">
import ServerDetail from '@/views/system/deviceManage/serverInfo/serverDetail'
import ServerTopo from '@/views/system/deviceManage/serverInfo/serverTopo'
export default {
name: 'ServerInfo',
components: { ServerDetail, ServerTopo },
props: {
},
data() {
return {
activeName: 'topo',
serverInfoList: [],
dataTopo: [],
links: [],
number: undefined
}
},
created() {
this.sendToServerList()
},
methods: {
updateActiveName(data) {
// 修改activeName的名称
this.activeName = data
},
tabClick(pane, event) {
}
}
}
</script>
<style scoped>
</style>
要实现点击效果的子组件:
// 双击节点时,跳转到服务器详细信息中
echarts.init(chart).on('dblclick', function(params) {
if (params.dataType == 'node') {
// 子组件向父组件传值,修改tabs的activeName,从而达到组件切换的效果
that.$emit('updateActiveName', 'serverInfo')
}
});