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 相关文章推荐
javascript web对话框与弹出窗口
Feb 22 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
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
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
js选项卡的制作方法
2017/01/23 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python实现带百分比的进度条
2016/06/28 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
Python正则表达式如何匹配中文
2020/05/27 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
家长会演讲稿范文
2014/01/10 职场文书
卖车协议书
2014/04/21 职场文书
市场开发计划书
2014/05/07 职场文书
住宅使用说明书
2014/05/09 职场文书
大雁塔导游词
2015/02/04 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
死亡诗社观后感
2015/06/05 职场文书
红色故事汇观后感
2015/06/18 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python