vue中如何优雅的修改子组件的样式

v-deep语法

我们经常会遇到使用子组件时,有不同的样式需求,这时我们就需要父组件的::deep语法来实现
例如我们需要找到子组件中的li,并修改其样式

::v-deep li{
    border:1px solid red;
}

class-prefix

同时我们会给子组件传一个独有的属性,就是class-prefix,这样我们就可以通过::v-deep语法来更精确的去修改子组件的样式
传参非常的简单,那么我们来研究一下如何在子组件的class中接受到传过来的class-prefix参数

//现在子组件ts中申明classprefix
@Prop(String)classPrefix?:string
//模板中使用,此处为析构语法,如果:后的逻辑成立,那么:class=classPrefix-item class=selected
<li :class={[classPrefix+'-item']:classPrefix,selected:item.value===value}></li>
//接下来我们就可以在父组件中随心所欲的修改样式了,比如我给的参数为classPrefix = 'hello'

::v-deep hello-item{
    border:1px solid red;//修改样式完毕
}