详解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 相关文章推荐
按给定几率进行随机抽取的js代码
Dec 28 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 Javascript
一文搞懂redux在react中的初步用法
Jun 09 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 变量定义和变量替换的方法
2009/07/30 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python 将字符串转换成字典dict
2013/03/24 Python
Python代码调试的几种方法总结
2015/04/15 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Django中的Model操作表的实现
2018/07/24 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
python中数据库like模糊查询方式
2020/03/02 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
生产现场工艺工程师岗位职责
2013/11/28 职场文书
骨干教师考核方案
2014/05/09 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
退学证明范本3篇
2014/10/29 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技