Vue切换Tab动态渲染组件的操作

使用

结合Element-UI的导航菜单 :

UI组件

el-menu-item里的index写对应的组件名

点击事件@select="handleSelect"


  首页
  关于我们

在点击事件里动态设置组件名

handleSelect(index) {
  this.activeIndex = index
}

完整代码

 
 
 
 

补充知识:vue 动态组件(tabs切换)keep-alive:主要用于保留组件状态或避免重新渲染

通过keep-alive 保留数据值 填写数据时切换到其他页面,后返回当前页数据保留 ,主要用于保留组件状态或避免重新渲染

 
 
 
  • 首页
  • 关于我们

Vue切换Tab动态渲染组件的操作_第1张图片

以上这篇Vue切换Tab动态渲染组件的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的:(Vue切换Tab动态渲染组件的操作)