本文实例为大家分享了Vue.js标签页组件使用的具体代码，供大家参考，具体内容如下

效果

入口页index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title标签页组件/title link rel='样式表type=' text/CSS ' href=' style。CSS '/头体div id=' app ' v-斗篷选项卡v-model='activeKey '窗格标签='标签一名称='1 '标签一的内容/pane窗格标签='标签二名称='2 '标签二的内容/pane窗格标签='标签三名称='3 '标签三的内容/pane/tab/div脚本src=' http :https://unpkg。com/Vue/dist/Vue。js '/script script src=' http :窗格。js '/script script src=' http : tass。js '/脚本类型=' text/JavaScript ' var app=new Vue({ El : ' # app '，data : { activekey 3360 ' 1 ' })；/脚本/正文/html样式表style.css

[v-clock]{显示：无；}.选项卡{ font-size : 14pxcolor: #657180} .{内容： }后的制表符-bar :显示器：块；宽度： 100%;高度： 1px背景# d7dd 4 margin-top :-1px；}.tab-tab { display : inline-block；padding: 4px 16px右边距： 6px背景# fffborder: 1px固体# d7dde4cursor:指针；相对位置：}.制表符-制表符-活动{ color: # ee99ff边框-top: 1px实心# 3399 fborder-bottom : 1px实心# fff}。{内容： }之前的tab-tab-active :显示器：块；高度： 1px背景# 3399ff绝对位置：top : 0；左： 0；右： 0；}.选项卡-内容{ padd : 8px 0；}标签页外层的组件tabs tabs.js

vue。组件(' tab '，{ template : ' div class=' tab ' div class=' tab-bar ' ！-标签页标题，这里要用v-for- div : class=' tab bcls(item)' v-for=' nav list '中的(项目，索引)' @单击=' handleChange(index)' { { item。label } } /div /div class=' tab-content ' ！-这里的狭槽就是嵌套的pane - slot/slot /div /div '，prop : { value : { type :[String，Number] } }，data: function () { return { //用于渲染制表符的标题current value e : this . value，navList: [] }，methods : { tab cls(item){ return[' tab-tab '，{ ' tab-tab-active ' : item。name===这个。当前值}]}，GetAbs(){//通过遍历子组件，得到所有的窗片组件归还这个$children.filter(函数（项){退货项目.$ options . name===' pane })；}，updateNav(){ this。nav list=[]；//设置对这的引用，在功能回调里，这个的指向的并不是某视频剪辑软件实例var _ this=thisthis.getTabs().forEach((窗格，索引)={ _ this。导航列表。推送({ label :窗格。标签，名称：窗格。name | | index })；//如果没有给窗片设置名字，默认设置它的索引if(！pane.name) pane.name=索引；//设置当前选中的标签的索引if(index===0){ if(！_这个。currentvalue){ _ this。currentvalue=pane。名称| |索引；} } });这个。update status()；}，updateStatus(){ var tab=this。gettabs()；var _ this=this//显示当前选中的标签对应的窗片组件，隐藏没有选中的选项卡。foreach(tab={ return tab。show=tab。name===_ this。currentvalue});}，handleChange:函数(指数){ var nav=this。导航列表[索引]；var name=nav . name this . CurrentValue=name这个$emit('input '，name)；这个$emit('点击，名称);} }，watch : { value : val={ this。currentvalue=val}，currentValue:函数(){这个。updateStatus()；} }});标签页嵌套的组件窗格窗格。射流研究…

Vue.component('pane '，{ name: 'pane '，template : ' div class=' pane ' v-show=' show ' slot/slot /div '，data : function(){ return { show : true } }，props: { name: String }，label: { type: String，default: ' ' }，methods : { updatenav 33: function(){ 0updateNav()；} }，watch : { label : function(){ this。updatenav()；} }，挂载ed :函数(){ this。updatenav()；}});更多教程点击《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

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