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 开发中规范性的一点感想
Jun 23 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
javascript new fun的执行过程
Aug 05 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
vue中watch和computed的区别与使用方法
Aug 23 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
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
小程序实现多列选择器
2019/02/15 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
JS随机密码生成算法
2019/09/23 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
Windows下安装python2.7及科学计算套装
2015/03/05 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
采购部经理岗位职责
2014/02/10 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
师德师风的心得体会
2014/09/02 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
共青团员自我评价
2015/03/10 职场文书
土建技术员岗位职责
2015/04/11 职场文书
稽核岗位职责范本
2015/04/13 职场文书
SQL Server删除表中的重复数据
2022/05/25 SQL Server