Elementui tabs组件内添加组件

1. Elementui tabs组件内添加组件

1.1. 需求

1. 今天的一个需求是在后台框架的基础上添加tab页，结果页面如下
   

2. 原本上述红框内的内容是不存在的，直接点击左侧菜单栏进行页面跳转，现加了tab标签栏，实现快速的跳转

1.2. 实现

1. 具体要根据自己的route实现类进行筛选，核心vue如下

1. 上述是tab的实现，再就是菜单选择调用tab的addTab方法

  



addTab(e) {
  this.$refs.tabBar.addTab(e);
}

1. 上面代码会看着有点奇怪，因为SideBar，也就是上述的el-menu所在组件和tab是平级的，如下

siderBar和tab-bar在同一个组件内，所以要实现参数传递，需要先emit提交事件，再在父组件传递给另一个子组件，这样链路就完整了，没看懂我的看下面的参考吧，我也是参考它的结合自己的代码实现

1.3. 参考

1. 参考自该问答陶通的回答

转载于:https://www.cnblogs.com/sky-chen/p/10975234.html