先说当时的思路和实现
核心是父子组件传值和v-bind指令动态绑定class实现
1. 父组件引用、注册、调用子组件
script中引用
import child from ‘../components/Child‘
export中注册
export default { name: ‘Home‘, components: { child }, }
template中调用(pug写法)
child()
2. 父组件准备数据并处理
data() { return { classNames: ‘‘; } }
created() { this.className = ‘hhh‘; }
3. 父组件传值给子组件
child(v-bind:className = "className")
4. 子组件接收
export default { props: [‘className‘] }
5. 子组件内部、动态绑定class
div(v-bind:class="[‘className‘]")
6. 绑定完毕后，父组件数据变化将影响子组件
但其实后来发现更方便的做法，直接在父组件上动态修改类名，
然后根据css选择器的嵌套来达到数据不同，样式展示不同的目的，而不一定必要地去改子组件的类名。
【捂脸】
原文：https://www.cnblogs.com/padding1015/p/9669684.html