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 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
原生js 秒表实现代码
Jul 24 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
vue router demo详解
Oct 13 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 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
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Django 路由层URLconf的实现
2019/12/30 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
购房意向书
2014/04/01 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android
使用Python获取字典键对应值的方法
2022/04/26 Python
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers