\
\
\
\
',
props: {
value: {
type: [String, Number]
}
},
data: function () {
return {
//用于渲染tabs的标题
currentValue: this.value,
navList: []
}
},
methods: {
tabCls(item){
return [
'tabs-tab',
{
'tabs-tab-active': item.name === this.currentValue
}
]
},
getTabs(){
//通过遍历子组件，得到所有的pane组件
return this.$children.filter(function (item) {
return item.$options.name === 'pane';
});
},
updateNav(){
this.navList = [];
//设置对this的引用，在function回调里，this的指向的并不是Vue实例
var _this = this;
this.getTabs().forEach((pane, index) => {
_this.navList.push({
label: pane.label,
name: pane.name || index
});
//如果没有给pane设置name，默认设置它的索引
if(!pane.name)
pane.name = index;
//设置当前选中的tab的索引
if(index === 0){
if(!_this.currentValue){
_this.currentValue = pane.name || index;
}
}
});
this.updateStatus();
},
updateStatus(){
var tabs = this.getTabs();
var _this = this;
//显示当前选中的tab对应的pane组件，隐藏没有选中的
tabs.forEach(tab => {
return tab.show = tab.name === _this.currentValue;
});
},
handleChange: function (index) {
var nav = this.navList[index];
var name = nav.name;
this.currentValue = name;
this.$emit('input', name);
this.$emit('on-click', name);
}
},
watch: {
value: val => {
this.currentValue = val;
},
currentValue: function () {
this.updateStatus();
}
}
});标签页嵌套的组件pane pane.js
Vue.component('pane',{
name: 'pane',
template: '\
\
\
',
data: function () {
return {
show: true
}
},
props: {
name: String
},
label: {
type: String,
default: ''
},
methods: {
updateNav: function () {
this.$parent.updateNav();
}
},
watch: {
label: function () {
this.updateNav();
}
},
mounted: function () {
this.updateNav();
}
});以上就是如何在Vue.js中使用标签页组件，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前名称：如何在Vue.js中使用标签页组件-创新互联
转载注明：http://www.whjierui.cn/article/phejc.html
