vue组件封装选项卡

<template>
    <myMenu :arr='arr' :arrcontent='content'></myMenu>
</template>
<script>
import myMenu from './MyMenu'
  export default{
    data(){
      return {
        arr:['aa','bb','cc'],
        content:['aa content','bb content','cc content']
      }
    },
    components:{
        myMenu
    }
  }
</script>
//模板块 父

<template>
   <div class="tab">
        <ul>
            <li v-for="(item,ind) in this.arr" :key="ind" 
                :class="{active:cur===ind}"
                @click="cur=ind">{{item}}</li>
        </ul> 
        <div class="content">
            <component :is="list[cur]"></component>
        </div>  
    </div>
</template>
<script>
    export default{
        props:['arrcontent','arr'], 
        data(){
            return {
                cur:0,
                list:[]
            }
        },
        created(){
            for(let i = 0; i<this.arrcontent.length ; i++){
                    this.list.push({template:'<div>'+this.arrcontent[i]+'</div>'})
            }
        }
    }
</script>
<style scoped>
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    li{
        width: 100px;
        text-align: center;
        float: left;
    }
    .active{
        background: skyblue;
        color: white;
    }
    .content{
        width: 300px;
        height: 250px;
        background: salmon;
        font-size: 50px;
        line-height: 250px;
    }
    .tab{
        overflow: hidden;
    }
</style>
//子组件

效果图 基于vue-cli的组件

转载于:https://www.cnblogs.com/l8l8/p/9379638.html