vue如何实现选项卡组件

这篇文章主要为大家展示了"vue如何实现选项卡组件"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"vue如何实现选项卡组件"这篇文章吧。

具体内容如下

主要功能：点击不同的选项，显示不同的内容

html

                                                                    
                            我是张三                我是李四                我是牛五                    
                    

pane.js

Vue.component('pane',{    name: 'pane',    template: '\        
 \             \        
',    data: function(){        return {            show: true        }    },    props: {        name: {            type: String        },        label: {            type: String,            default: ''        }    },    methods: {        updateNav()    {            this.$parent.updateNav();        }    },    watch: {        label(){            this.updateNav();        }    },    mounted() {        this.updateNav();    }})

tabs.js

Vue.component('tabs',{    template: '\        
\            
\                
 \                    {{item.label}} \                
\            
 \            
 \                 \            
 \        
',    props: {        value: {            type: [String,Number]        }    },    data: function(){        return {            currentValue: this.value,            navList: []        }    },    methods: {        tabCls: function(item){            return [                'tabs-tab',                {                    'tabs-tab-active': item.name===this.currentValue                }            ]        },        //遍历所有为pane的子元素        getTabs(){            return this.$children.filter(function(item){                return item.$options.name==='pane';            });        },        //将pane子元素中label name放进navList数组        updateNav() {            this.navList=[];            var _this=this;            this.getTabs().forEach(function(pane,index){                _this.navList.push({                    label: pane.label,                    name: pane.name ||index                });                if(!pane.name) pane.name=index;                if(index===0){                    if(!_this.currentValue){                        _this.currentValue=pane.name || index;                    }                }            });            this.updateStatus();        },        updateStatus(){            var tabs=this.getTabs();            var _this=this;            //显示当前正在选中的            tabs.forEach(function(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: function(val){            this.currentValue=val;        },        currentValue: function (){            this.updateStatus();        }    }    })

以上是"vue如何实现选项卡组件"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！