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選擇器的嵌套來達到數據不同，樣式展示不同的目的，而不一定必要地去改子組件的類名。

【捂臉】