vue3 父组件修改子组件css样式

在Vue3中，父组件可以通过`$refs`访问子组件，并修改其CSS样式。具体步骤如下：

1. 在子组件中，给需要修改的DOM元素添加一个`ref`属性。

2. 在父组件中，使用`$refs`访问子组件，并通过`$refs`获取到子组件的DOM元素。

3. 修改DOM元素的CSS样式即可。

以下是一个示例代码：

子组件：

<template>
  <div ref="childDiv">子组件中的内容</div>
</template>

父组件：

<template>
  <div>
    <child ref="myChild"></child>
    <button @click="changeChildStyle">修改子组件样式</button>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  methods: {
    changeChildStyle() {
      const childDiv = this.$refs.myChild.$refs.childDiv;
      childDiv.style.color = 'red';
      childDiv.style.fontSize = '20px';
    },
  },
};
</script>

在上面的代码中，当点击按钮时，会访问名为`myChild`的子组件，并获取到它的名为`childDiv`的DOM元素，然后修改它的颜色和字体大小。