时间:2021-05-26
使用<component :is="组件名"></component>
结合Element-UI的导航菜单 :
UI组件
el-menu-item里的index写对应的组件名
点击事件@select="handleSelect"
<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>在点击事件里动态设置组件名
handleSelect(index) { this.activeIndex = index}完整代码
<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 保留数据值 填写数据时切换到其他页面,后返回当前页数据保留 ,主要用于保留组件状态或避免重新渲染
<!--动态组件-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><script type="text/x-Template" id="homeTemp"> <h2>首页数据</h2></script><script type="text/x-Template" id="abountTemp"> <h2>关于我们数据<input type="text"/></h2></script><script type="text/javascript"> var vm=new Vue({ el:'.app', data:{ currView:"home" }, components:{ "home":{ template:"#homeTemp" }, "abount":{ template:"#abountTemp" } } }); </script>以上这篇Vue切换Tab动态渲染组件的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在vue中,实现Tab切换主要有三种方式:使用动态组件,使用vue-router路由,使用第三方插件。因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需
Vue嵌套路由:实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区域里的内容,切换时不重复渲染):Demo访问时
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和相似,是一个抽象组件:它自
通过在vue中使用element的table表格,实现数据动态渲染,并且动态渲染表头。通过在父组件中引入子组件表格,然后向子组件传递表格数据和表头数据。子组件t
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和相似,是一个抽象组件:它