vue在父组件里修改组件样式方法

Vue.js 中，在父组件修改子组件样式的通常做法是通过 prop（属性）传递自定义样式、利用 `$refs` 来直接操作 DOM，或者是使用 Vue 的计算属性和指令（如 v-bind:class 或 v-style）。以下是几种常见的方法：

1. **通过 Props 传递样式**:
父组件可以将一个对象作为 prop 传给子组件，并在子组件模板上绑定这个对象，例如：

   <child-component :styles="customStyles"></child-component>

然后在子组件内使用 `v-bind:class` 或 `v-bind:style`。

2. **使用 $refs**:
先在父组件中通过 `ref` 属性获取到子组件的引用，然后在需要的时候修改其样式：

   <child-component ref="myChildComponent"></child-component>
   //...
   this.$refs.myChildComponent.style.color = 'red';

3. **计算属性结合动态绑定**:
如果样式依赖于数据变化，可以在父组件创建一个计算属性，然后基于该计算结果更新子组件的样式：

   computed: {
     dynamicStyles() {
       return { backgroundColor: this.someData ? 'blue' : 'white' };
     }
   },
   template: `
     <child-component :style="dynamicStyles"></child-component>
   `

4. **使用 v-bind:style 特殊处理**:
对于复杂的 CSS 样式，可以直接将一个包含样式的字符串传递给 `v-bind:style`：

   <child-component :style="{ color: 'red', fontSize: '16px' }"></child-component>

请注意，频繁地直接修改子组件样式可能会导致组件状态难以管理，一般推荐尽量避免这种情况，除非有特殊需求。