vue 单文件组件中 如何在 父组件中修改子组件的样式

你可以使用prop属性来将样式传递给子组件，并使用$emit方法在子组件中触发事件，从而在父组件中修改子组件的样式。具体操作可参考以下代码：

在父组件中：

<template>
<div>
<ChildComponent :childStyle="parentStyle" @updateStyle="updateStyle"/>
</div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
components: {
ChildComponent
},
data() {
return {
parentStyle: {
backgroundColor: 'red'
}
}
},
methods: {
updateStyle(updatedStyle) {
this.parentStyle = updatedStyle
}
}
}
</script>

在子组件中：

<template>
<div :style="childStyle">
<!-- 子组件内容 -->
</div>
</template>

<script>
export default {
props: {
childStyle: {
type: Object,
required: true
}
},
methods: {
handleClick() {
const updatedStyle = {
backgroundColor: 'blue'
}
this.$emit('updateStyle', updatedStyle)
}
}
}
</script>

在子组件中，当需要修改样式时，可以在相应的事件中调用handleClick方法，该方法会触发updateStyle事件，并将修改后的样式传递给父组件。父组件接收到事件后，会将新的样式更新到parentStyle中，从而实现样式的修改。