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

更新时间：2021年09月07日 15:30:59 作者：luckylqh

这篇文章主要为大家详细介绍了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:[]后，就可以接收到父组件传来的方法，以及数据。

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

您可能感兴趣的文章:

vue将秒数转成"时分秒"格式实例代码
在项目中,请求后台接口返回的值是秒,这篇文章主要给大家介绍了关于vue将秒数转成"时分秒"格式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
vue3+element Plus使用el-tabs标签页解决页面刷新不回到默认页的问题
这篇文章主要介绍了vue3+element Plus使用el-tabs标签页页面刷新不回到默认页的操作方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07
解决打包后出现错误y.a.addRoute is not a function的
这篇文章主要介绍了解决打包后出现y.a.addRoute is not a function的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue3 elementPlus 表格实现行列拖拽及列检索功能(完整代码)
本文通过实例代码给大家介绍vue3 elementPlus 表格实现行列拖拽及列检索功能,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-10-10
浅谈vue.js导入css库(elementUi)的方法
下面小编就为大家分享一篇浅谈vue.js导入css库(elementUi)的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue项目中使用bpmn-自定义platter的示例代码
这篇文章主要介绍了vue项目中使用bpmn-自定义platter的实例代码，本文通过代码截图相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-05-05
Vue.Draggable拖拽功能的配置使用方法
这篇文章主要为大家详细介绍了Vue.Draggable拖拽功能配置使用的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
利用Vue.js实现checkbox的全选反选效果
最近用vue做了两个项目，都需要实现全选反选的功能，所以想着记录下分享给大家，方便自己或者有需要的朋友们参考讲学习，所以下面这篇文章主要介绍了利用Vue.js实现checkbox的全选反选效果,需要的朋友可以一起来学习学习。
2017-01-01
Vue使用Canvas生成随机大小且不重叠圆
Canvas是HTML5中新增的元素,专门用来绘制图形,下面这篇文章主要给大家介绍了关于Vue使用Canvas生成随机大小且不重叠圆的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-11-11
vue axios接口请求封装方式
这篇文章主要介绍了vue axios接口请求封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01