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


Posted in Javascript onMarch 25, 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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
javascript 面向对象继承
Nov 26 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
js实现照片墙功能实例
Feb 05 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 #Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 #Javascript
JS操作xml对象转换为Json对象示例
Mar 25 #Javascript
javascript实现的图片预览功能
Mar 25 #Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 #Javascript
bootstrap table动态加载数据示例代码
Mar 25 #Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 #Javascript
You might like
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
PHP多文件上传实例
2015/07/09 PHP
基于JQuery的多标签实现代码
2012/09/19 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
详解python的super()的作用和原理
2020/10/29 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
农民入党思想汇报
2014/01/03 职场文书
安全生产目标责任书
2014/04/14 职场文书
争先创优公开承诺书
2014/08/30 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript