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 相关文章推荐
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
jQuery 事件的命名空间简单了解
Nov 22 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
Vue接口封装的完整步骤记录
May 14 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中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
PHP进程同步代码实例
2015/02/12 PHP
JavaScript 常用函数
2009/12/30 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
JavaScript函数详解
2014/11/17 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
小程序实现锚点滑动效果
2019/09/23 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
什么是Python包的循环导入
2020/09/08 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
干部行政关系介绍信
2014/01/17 职场文书
党员岗位承诺书
2014/03/25 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
公司给客户的感谢信
2015/01/23 职场文书
早安问候语大全
2015/11/10 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android