vue动态组件实现选项卡切换效果


Posted in Javascript onMarch 08, 2017

本文实例为大家分享了vue动态组件实现选项卡切换的具体代码,供大家参考,具体内容如下

导航按钮:

<div class="tab-title"> 
   <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p>
   <p @click="a='tab2'"><router-link to='/collectusedcars'>二手车</router-link><em></em></p>
   <p @click="a='tab3'"><router-link to='/collectproducts'>车品</router-link></p>
  </div>

<div class="tabs">
 <component is:="current"></component>
</div>

写3个子组件分别为

<tab1></tab1>
<tab2></tab2>
<tab3></tab3>

js里面用局部组件引入这三个子组件

//数据里面
data (){
 return {
  a:'tab1'  //默认显示tab1子组件
 }
}
components:{
 'tab1':tab1,
 'tab2':tab2,
 'tab3':tab3
}

如果要从父组件里面往这些字组件里面传数据,和普通的父组件-》子组件传递数据是一个道理,只不过在这个里面绑定一次属性,就可以在每个子组件里面都接收到数据,例如:

<component :is="current" :clients-data="client" :refresh-data="getClient" :user-type-data="userTypes"></component>

在子组件里面定义props:[]后,就可以接收到父组件传来的方法,以及数据。

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

Javascript 相关文章推荐
js算法中的排序、数组去重详细概述
Oct 14 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 #Javascript
Vue.js组件tab实现选项卡切换
Mar 23 #Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 #Javascript
完美实现js选项卡切换效果(一)
Mar 08 #Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 #Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 #Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 #Javascript
You might like
Parse正式发布开源PHP SDK
2014/08/11 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
javascript 面向对象继承
2009/11/26 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
python 自动提交和抓取网页
2009/07/13 Python
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
python模块导入的细节详解
2018/12/10 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
浅谈Python协程
2020/06/17 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
后勤工作职责
2013/12/22 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
我的中国梦主题班会
2015/08/14 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL