详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)


Posted in Javascript onAugust 30, 2017

在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件。

因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些。

先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件。

详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)

效果预览

关键代码及分析如下:

<template>
// 每一个 tab 绑定了一个点击事件,传入的参数对应着 tab 下的组件名
<div class="tabs">
 <div class="tab" @click="toggleTab('prince')"><a>小王子</a></div>
 <div class="tab" @click="toggleTab('rose')"><a>小玫瑰</a></div>
 <div class="tab" @click="toggleTab('fox')"><a>小狐狸</a></div>
</div>
// 子组件,显示不同的 tab
// is 特性动态绑定子组件
// keep-alive 将切换出去的组件保留在内存中
<prince :is="currentTab" keep-alive></prince>
</template>

<script>
// 引入子组件
import prince from './components/prince';
import rose from './components/rose';
import fox from './components/fox';
export default {
 name: 'app',
 data () {
  return {
   currentTab: 'prince' // currentTab 用于标识当前触发的子组件
  };
 },
 components: { // 声明子组件
  prince,
  rose,
  fox
 },
 methods: {
  toggleTab: function(tab) {
   this.currentTab = tab; // tab 为当前触发标签页的组件名
  }
 }
}
</script>

使用动态组件实现 Tab 标签页切换的基本过程可以概括为:

  • 在父组件中定义一个主 tab 标签页,用于切换,同时为每个 tab 绑定点击事件,传入该 tab 的子组件名,最后引入并定义子组件
  • 子组件中是各 tab 标签页的内容
  • 使用 is 特性动态切换子组件,使用 kee-alive 缓存

is 特性一般用于原生 HTML 元素扩展

举个栗子,一般在 ul 标签中只能嵌套 li 标签,但是我们现在想在 ul 标签内使用自定义组件 v-li。

<ul>
  <v-li></v-li>
</ul>

而这样写肯定是不行的,这就需要用到 is 特性了。

<ul>
  <li is="v-li"></li>
</ul>

这也就是为什么利用 is 特性可以实现动态切换组件的效果。

keep-alive 指令可以将切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
jQuery插件制作的实例教程
May 16 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
js实现移动端图片滑块验证功能
Sep 29 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 #Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 #Javascript
如何理解Vue的render函数的具体用法
Aug 30 #Javascript
微信小程序之发送短信倒计时功能
Aug 30 #Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 #Javascript
hammer.js实现图片手势放大效果
Aug 29 #Javascript
js禁止表单重复提交
Aug 29 #Javascript
You might like
PHP新手上路(四)
2006/10/09 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
调试php程序的简单步骤
2019/10/04 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
python实现指定ip端口扫描方式
2019/12/17 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
建筑行业的大学生自我评价
2013/12/08 职场文书
抄作业检讨书
2014/02/17 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
银行实习推荐信
2015/03/27 职场文书
小学英语教学随笔
2015/08/14 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python