使用<component :is="组件名"></component>
结合Element-UI的导航菜单 :
UI组件
el-menu-item里的index写对应的组件名
点击事件@select="handleSelect"
|
1
2
3
4
5
|
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="Home">首页</el-menu-item> <el-menu-item index="About">关于我们</el-menu-item></el-menu><component :is="activeIndex"></component> |
在点击事件里动态设置组件名
|
1
2
3
|
handleSelect(index) { this.activeIndex = index} |
完整代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<template> <div id="app"> <!-- 导航栏 --> <el-row class="home_nav" type="flex" justify="flex-start" align="middle"> <el-col :span="2" :offset="4"> <div>LOGO</div> </el-col> <el-col :span="12"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="Home">首页</el-menu-item> <el-menu-item index="About">关于我们</el-menu-item> </el-menu> </el-col> </el-row> <component :is="activeIndex"></component> </div></template><script>import Home from './components/Home.vue'import About from './components/About.vue'export default { name: 'app', components: { Home, About }, data(){ return { activeIndex: "Home" } }, methods: { handleSelect(index) { this.activeIndex = index } }}</script><style></style> |
补充知识：vue 动态组件（tabs切换）keep-alive：主要用于保留组件状态或避免重新渲染
通过keep-alive 保留数据值 填写数据时切换到其他页面，后返回当前页数据保留 ，主要用于保留组件状态或避免重新渲染
|
1
2
3
4
5
6
7
8
9
10
11
|
<!--动态组件-component使用--><div class="app"><ul> <li @click="currView='home'">首页</li> <li @click="currView='abount'">关于我们</li></ul><!--通过keep-alive 保留数据值 填写数据时切换到其他页面，后返回当前页数据保留--><keep-alive> <component :is="currView"></component></keep-alive></div> |
|
1
2
3
4
5
6
|
<script type="text/x-Template" id="homeTemp"> <h2>首页数据</h2></script><script type="text/x-Template" id="abountTemp"> <h2>关于我们数据<input type="text"/></h2></script> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script type="text/javascript"> var vm=new Vue({ el:'.app', data:{ currView:"home" }, components:{ "home":{ template:"#homeTemp" }, "abount":{ template:"#abountTemp" } } }); </script> |
以上这篇Vue切换Tab动态渲染组件的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/denghuocc/article/details/99577894
