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 attachEvent传递参数的办法
Dec 14 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
Python实现自动访问网页的例子
2020/02/21 Python
Python字符串三种格式化输出
2020/09/17 Python
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
大学生自荐信
2013/12/11 职场文书
预备党员入党思想汇报
2014/01/04 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
理财计划书
2014/08/14 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书