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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
使用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
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
调试php程序的简单步骤
2019/10/04 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
初识Node.js
2015/03/20 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
教育英语专业毕业生的求职信
2014/03/13 职场文书
争先创优公开承诺书
2014/08/30 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书