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

时间:2021-11-24 15:52:05

使用<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动态渲染组件的操作

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

原文链接:https://blog.csdn.net/denghuocc/article/details/99577894