实际项目中,我们经常遇到父组件控制子组件的css问题
具体思路这样的
- 父组件在子组件的标签上传递一个属性,比如
<子组件名称 class-prefix = xxx > - 子组件使用
props:[ 'classPrefix']来获得 名为classPrefix的属性 - 因此,子组件中就有个属性classPrefix,他的值是xxx
现在,子组件拥有了父组件传递给他的值
那么就可以动态绑定class,使子组件的标签上的class = ’ xxx’
- 为了达到这个目的,需要使用动态绑定v-bind
- 例如,
<子组件标签 :class='classPrefix'>,这样,在dom中子组件标签就有一个名为xxx的class - 那么,父组件可以直接使用 .xxx 选择子组件元素
那么问题来了,如果要控制子组件多个元素, 只像子组件传递了一个值怎么办?难道这么多元素就要传递更多的值过去吗?
解决办法: :class=" ${classPrefix}-自定义名称 "
这样父组件如果要选子组件10个元素,那只要style标签中 使用xxx-自定义名称就可以了,不同的子组件整不同的自定义名称