Vue2 父子组件之间传递 Class 样式

在 Vue2 中，父组件可以通过 props 将 class 样式传递给子组件。子组件可以接受这些 class 样式，并将其应用于自己的元素上。

以下是一个示例：

父组件：

<template>
  <div>
    <ChildComponent :class-styles='classStyles'></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      classStyles: ['red', 'bold']
    };
  }
};
</script>

子组件：

<template>
  <div :class='classStyles'>
    Child Component
  </div>
</template>

<script>
export default {
  props: {
    classStyles: {
      type: Array,
      required: true
    }
  }
};
</script>

在上面的示例中，父组件通过 props 将一个名为'classStyles' 的数组传递给子组件。子组件使用 :class 绑定将这个数组应用于自己的 <div> 元素。这样，子组件就可以接受并应用父组件传递的 class 样式。

您可以在父组件的'classStyles' 数组中定义任意数量的 class 样式，子组件将会应用这些样式。