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


Posted in Javascript onSeptember 21, 2020

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

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

Javascript 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
js实现购物车商品数量加减
Sep 21 #Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 #Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 #Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 #Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 #Javascript
JS实现小米轮播图
Sep 21 #Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 #Javascript
You might like
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
pandas数据分组和聚合操作方法
2018/04/11 Python
django中间键重定向实例方法
2019/11/10 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
python实现人机五子棋
2020/03/25 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
大学生自荐书范文
2013/12/10 职场文书
物业工作计划书
2014/01/10 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
员工工作及收入证明
2014/10/28 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
庆六一开幕词
2015/01/29 职场文书
消防验收申请报告
2015/05/15 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
如何正确理解python装饰器
2021/06/15 Python
python异步的ASGI与Fast Api实现
2021/07/16 Python