我自己做了一个tabs组件，但是父组件想要改变此组件（tabs组件）的样式，比如我想改变文字的颜色，父组件需要在style里样式后加上！important才能改变文字颜色，如果用props接收值的话，那么多样式不可能一一列举出来。

在组件设计上有没有什么标准，比较好的组件写法呢？

tabs组件代码如下：

<template>

<div class="box-view">

<div class="box">

<div class="tab" v-for="(tab,i) in tabs" :class="{selected:tab==selected}" @click="changeTab(i)">

<span>{{tab}}</span>

</div>

</div>

</div>

</template>

<script>

export default{

data(){

return{

selected:null

}

},

props:{

tabs:[]

},

mounted(){

this.selected = this.tabs[0];

},

methods:{

changeTab(i){

this.selected=this.tabs[i];

}

}

}

</script>

<style scoped>

.box{

display:flex;

justify-content:space-around;

color:#999;

}

.selected{

color:red;

}

.selected:after{

content:'';

display:block;

width:100%;

height:2px;

background-color:red;

}

</style>