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

本文实例为大家分享了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:[]后，就可以接收到父组件传来的方法，以及数据。

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

赞 (0)

相关推荐

  • Vue.js组件tab实现选项卡切换

    Vue.js组件tab实现选项卡切换

    本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:

  • bootstrap vue.js实现tab效果

    bootstrap vue.js实现tab效果

    本文实例为大家分享了bootstrap vue.js实现tab效果的具体代码,供大家参考,具体内容如下 项目目录结构 Student.js代码 function Student(){ this.baseInfo = { tabStatus : true , name : '张三', sex : 'male' } , this.parentsInfo = { tabStatus : false, fatherName : '张全蛋', motherName : '李铁柱' } , this.stu

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

    最近在研究vue的路上,那么今天也算个学习笔记吧! 导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"><router-link

  • Vue.js组件tabs实现选项卡切换效果

    Vue.js组件tabs实现选项卡切换效果

    今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

  • Vue.js tab实现选项卡切换

    本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css" rel=&quo

  • 基于Vue实现tab栏切换内容不断实时刷新数据功能

    基于Vue实现tab栏切换内容不断实时刷新数据功能

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

  • vue插件tab选项卡使用小结

    vue插件tab选项卡使用小结

    本文实例为大家分享了vue插件tab选项卡的使用方法,供大家参考,具体内容如下 基本用法 <template> <tab :options="tabOpt" :state.sync="stateIndex"></tab> </template> <script type="text/babel"> import tab from 'components/tab_touch'; expor

  • 使用vue.js写一个tab选项卡效果

    使用vue.js写一个tab选项卡效果

    通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,但是在vue.js中,我们能不去操作dom我们就尽量不操作dom,那么该如何实现呢? 如果使用过vue-router,那么你会发现,vue-router在使用的时候其实就相当于一个tab选项卡,在点击之后,被点击的router-link元素会默认被添加上一个router-link-active的类,我们只需要设置这个类的样式即可.(当然,router-link-acti

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

    本文实例为大家分享了vue动态组件实现选项卡切换的具体代码,供大家参考,具体内容如下 导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"&g

  • vue使用动态组件实现TAB切换效果

    vue使用动态组件实现TAB切换效果

    问题描述 tab切换的场景在开发中会经常用到.当需要实现这种效果的时候,我们常常会想到下面的方式去实现这个效果. 方式一 使用display:none;去控制dom元素的显示与隐藏.从而实现,两个tab的显示与隐藏.不过如果有三四个tab要切换的话,这种方式就不可取了. 方式二 使用vue中的指令v-if或者v-show实现.这种方式可以实现,不过代码写的不优雅.试想一个.vue文件中出现一大把v-if是什么样的效果?而且使用v-if还得声明很多的变量去做标识.所以不是十分好的的解决方案 方式三

  • ionic组件ion-tabs选项卡切换效果实例

    ionic组件ion-tabs选项卡切换效果实例

    介绍 ion-tabs是ionic中的选项卡组件,路由使用的是angular-ui-router.js.因此必须先掌握uiRoute. 效果图 实例代码 index.html <body ng-app="starter"> <!--ion-nav-view用来渲染模板--> <ion-nav-view></ion-nav-view> </body> tab-index.html <ion-tabs class="

  • Vue实现内部组件轮播切换效果的示例代码

    对于那些不需要路由的内部组件,在切换的时候希望增加一个轮播过渡的效果,效果如下: 我们可以引入一个轮播组件,但是有个问题,通常轮播组件都会把所有的slide都渲染出来再进行切换,这样就导致所有的资源都会触发加载,这可能不是我们所期待的,毕竟如果slide比较多的情况需要一次性加载的图片等资源太多了.所以我们可以手动简单地写一个,满足需求即可. 现在一步步来实现这个功能,先写一个实现基本切换的demo. 1. 实现切换 先用vue-cli搭建一个工程脚手架,使用以下命令: npm install

  • Vue.js组件实现选项卡以及切换特效

    Vue.js组件实现选项卡以及切换动画特效,供大家参考,具体内容如下 最近在学习Vue,当看梁灏大神写的<Vue.js实战>时看到了关于用组件实现选项卡功能,我也根据课后的练习加上自己的理解重新编写了一下. 组件分为pane.js和tabs.js两个部分,话不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

  • vue实现选项卡及选项卡切换效果

    vue实现选项卡及选项卡切换效果

    这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目中需要实现的一些效果拆分成模块.你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回过头来看我的实现代码.记住,通读Vue文档真的很重要,很重要! 这里的Vue以单文件的形式引入,另外代码在实现上会一步步的进行优化,客官不要着急! 下面是一个样式稍微丑陋,但功能OK的选项卡. <!DOCTYPE html> <html> <head> <meta c

  • Vue 动态组件与 v-once 指令的实现

    本文介绍了Vue 动态组件与 v-once 指令的实现,分享给大家,具体如下: <div id="root"> <child-one></child-one> <child-two></child-two> <button>change</button> </div> Vue.component('child-one', { template: `<div>child-one&l

  • Vue动态组件与异步组件实例详解

    Vue动态组件与异步组件实例详解

    本文实例讲述了Vue动态组件与异步组件.分享给大家供大家参考,具体如下: 1 在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题.例如我们来展开说一说这个多标签界面: 你会注意到,如果你选择了一篇文章,切换到

  • 前端架构vue动态组件使用基础教程

    前端架构vue动态组件使用基础教程

    目录 1.基本使用 2.配合 keep-alive使用 1.基本使用 新建组件 Article.vue <template> <div> <p>黄州东南三十里为沙湖,亦曰螺师店.予买田其间,因往相田得疾.</p> <p>闻麻桥人庞安常善医而聋.遂往求疗.</p> <p>安常虽聋,而颖悟绝人,以纸画字,书不数字,辄深了人意.</p> <p>余戏之曰:"余以手为口,君以眼为耳,皆一时异人也.&

随机推荐