• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > vue中用动态组件实现选项卡切换效果

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

作者:luckylqh 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含vue 动态组件,vue动态添加组件,vue动态加载组件,vue 弹框组件,vue组件等相关知识,luckylqh 希望在学习及工作中可以帮助到您

最近在研究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>
</div>

写3个子组件分别为

<tab1></tab1>
<tab2></tab2>
<tab3></tab3>
</div>

js里面用局部组件引入这三个子组件

//数据里面
data (){
  return {
    a:'tab1'   //默认显示tab1子组件
  }
}
components:{
  'tab1':tab1,
  'tab2':tab2,
  'tab3':tab3
}
</div>

如果要从父组件里面往这些字组件里面传数据,和普通的父组件-》子组件传递数据是一个道理,只不过在这个里面绑定一次属性,就可以在每个子组件里面都接收到数据,例如:

<component :is="current" :clients-data="client" :refresh-data="getClient" :user-type-data="userTypes"></component>
</div>

在子组件里面定义props:[]后,就可以接收到父组件传来的方法,以及数据

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>

您可能想查找下面的文章:

  • Vue动态实现评分效果
  • Vue实现动态显示textarea剩余字数
  • vue中用动态组件实现选项卡切换效果
  • vue动态组件实现选项卡切换效果

相关文章

  • 2017-05-30vuejs响应用户事件(如点击事件)
  • 2017-05-30详解前后端分离之VueJS前端
  • 2017-05-30详解Vue2.0之去掉组件click事件的native修饰
  • 2017-05-30用v-html解决Vue.js渲染中html标签不被解析的问题
  • 2017-05-30Vue.js 2.0 移动端拍照压缩图片上传预览功能
  • 2017-05-30Vue.js组件tree实现无限级树形菜单
  • 2017-05-30vue.js单页面应用实例的简单实现
  • 2017-05-30Vue.js Ajax动态参数与列表显示实现方法
  • 2017-05-30简单实现Vue的observer和watcher
  • 2017-05-30vue.js利用defineProperty实现数据的双向绑定

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • vue基于Vue2.0和高德地图的地图组件实例
    • vue中用动态组件实现选项卡切换效果
    • Vue方法与事件处理器详解
    • require.js+vue开发微信上传图片组件
    • 源码分析Vue.js的监听实现教程
    • vue2.0实战之使用vue-cli搭建项目(2)
    • 前端框架Vue.js中Directive知识详解
    • 基于vue的fullpage.js单页滚动插件
    • Vue响应式添加、修改数组和对象的值
    • 详解Vue2 无限级分类(添加,删除,修改)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有