Vue.js中，父
组件直接
修改子
组件的
CSS样式通常不是最佳实践，因为这违背了
组件的封装原则和可复用性。子
组件应该负责自己的
样式，除非有特殊的需求，比如动态
样式或状态驱动的
样式。
然而，在某些情况下，比如需要在特定条件下临时调整
样式，可以使用以下方法：
1. 使用`v-bind:class`指令和对象：父
组件可以通过`$emit`事件将一个包含类名的对象传递给子
组件，然后在子
组件内部处理这个对象来
改变元素的类名，间接影响
样式。
```html
<!-- 父
组件 -->
<child-component :dynamicClass="parentStyle"></child-component>
<script>
export default {
data() {
return { parentStyle: { active: true } };
},
methods: {
changeStyle(newStyle) {
this.parentStyle = newStyle;
}
}
};
</script>
<!-- 子
组件 -->
<template>
<div v-bind:class="{ ...styles, [parentStyle.active]: isActive }">
...
</div>
</template>
<script>
export default {
props: ['dynamicClass'],
computed: {
styles() {
// 子
组件内部定义默认
样式
},
isActive() {
// 根据业务逻辑判断是否应用父
组件传来的类
return this.$props.dynamicClass.active;
}
}
};
</script>
```
2. 使用`ref`属性：父
组件可以获取到子
组件的引用，然后直接操作其`$el`（元素节点）的
样式。但这需要谨慎使用，因为它可能会导致
组件之间的耦合度过高。
```html
<!-- 父
组件 -->
<child-component ref="childComponent"></child-component>
<script>
export default {
methods: {
updateStyle() {
this.$refs.childComponent.$el.style.color = 'red';
}
}
};
</script>
```
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
