vue - 父组件数据变化控制子组件类名切换

我们总是在实现了效果后再复盘代码，就会发现其实有更简单的写法。。。

先说当时的思路和实现
核心是父子组件传值和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选择器的嵌套来达到数据不同，样式展示不同的目的，而不一定必要地去改子组件的类名。

【捂脸】

越努力，越幸运；阿门。