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