使用<component :is="組件名"></component>
結(jié)合Element-UI的導(dǎo)航菜單 :
UI組件
el-menu-item里的index寫(xiě)對(duì)應(yīng)的組件名
點(diǎn)擊事件@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">首頁(yè)</el-menu-item> <el-menu-item index="About">關(guān)于我們</el-menu-item></el-menu><component :is="activeIndex"></component> |
在點(diǎn)擊事件里動(dòng)態(tài)設(shè)置組件名
|
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"> <!-- 導(dǎo)航欄 --> <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">首頁(yè)</el-menu-item> <el-menu-item index="About">關(guān)于我們</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> |
補(bǔ)充知識(shí)：vue 動(dòng)態(tài)組件（tabs切換）keep-alive：主要用于保留組件狀態(tài)或避免重新渲染
通過(guò)keep-alive 保留數(shù)據(jù)值 填寫(xiě)數(shù)據(jù)時(shí)切換到其他頁(yè)面，后返回當(dāng)前頁(yè)數(shù)據(jù)保留 ，主要用于保留組件狀態(tài)或避免重新渲染
|
1
2
3
4
5
6
7
8
9
10
11
|
<!--動(dòng)態(tài)組件-component使用--><div class="app"><ul> <li @click="currView='home'">首頁(yè)</li> <li @click="currView='abount'">關(guān)于我們</li></ul><!--通過(guò)keep-alive 保留數(shù)據(jù)值 填寫(xiě)數(shù)據(jù)時(shí)切換到其他頁(yè)面，后返回當(dāng)前頁(yè)數(shù)據(jù)保留--><keep-alive> <component :is="currView"></component></keep-alive></div> |
|
1
2
3
4
5
6
|
<script type="text/x-Template" id="homeTemp"> <h2>首頁(yè)數(shù)據(jù)</h2></script><script type="text/x-Template" id="abountTemp"> <h2>關(guān)于我們數(shù)據(jù)<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動(dòng)態(tài)渲染組件的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/denghuocc/article/details/99577894
