vue3父组件修改子组件样式

在Vue 3中，通过父组件修改子组件的样式有几种方法：

1. 使用props传递样式数据：在子组件中定义props接收父组件传递的样式数据，然后使用动态绑定的方式将这些样式应用到子组件的相应元素上。

父组件：

   <template>
     <div>
       <child-component :style-obj="childStyle"></child-component>
       <button @click="changeStyle">修改子组件样式</button>
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent,
     },
     data() {
       return {
         childStyle: {
           backgroundColor: 'red',
           color: 'white',
         },
       };
     },
     methods: {
       changeStyle() {
         this.childStyle = {
           backgroundColor: 'blue',
           color: 'yellow',
         };
       },
     },
   };
   </script>

子组件：

   <template>
     <div :style="styleObj">子组件</div>
   </template>
   
   <script>
   export default {
     props: ['styleObj'],
   };
   </script>

2. 使用ref和teleport：在Vue 3中，可以使用teleport将子组件的内容渲染到父组件指定的位置，并使用ref引用子组件的根元素，然后通过修改ref引用的元素样式来达到修改子组件样式的目的。

父组件：

   <template>
     <div>
       <button @click="changeStyle">修改子组件样式</button>
       <teleport to="#child-container">
         <child-component ref="childRef"></child-component>
       </teleport>
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   import { ref } from 'vue';
   
   export default {
     components: {
       ChildComponent,
     },
     setup() {
       const childRef = ref(null);
   
       function changeStyle() {
         const childEl = childRef.value?.$el;
         if (childEl) {
           childEl.style.backgroundColor = 'blue';
           childEl.style.color = 'yellow';
         }
       }
   
       return {
         childRef,
         changeStyle,
       };
     },
   };
   </script>

子组件：

   <template>
     <div>子组件</div>
   </template>
   
   <script>
   export default {};
   </script>