Vue 2 子组件 Props 参数动态设置 CSS 类

在 Vue.js 2 中，子组件接受的 props 参数可以通过 v-bind 指令将其传递给子组件。然后，可以在子组件中使用这些 props 参数来设置相应的 CSS class 类型。

在子组件的模板中，可以使用 v-bind:class 指令来动态设置 CSS class。具体来说，可以通过计算属性或者直接使用 props 参数来判断何时添加或移除特定的 CSS class。

以下是一个示例，展示了如何使用 props 参数定位 CSS class 类型：

<template>
  <div :class='{"active": isActive}'>
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  }
}
</script>

在上述示例中，子组件接受一个名为 isActive 的 props 参数。然后，通过 v-bind:class 指令将 isActive 属性绑定到 div 的 class 属性上。当 isActive 为 true 时，将添加名为 'active' 的 CSS class；当 isActive 为 false 时，将移除该 CSS class。

在父组件中，可以通过使用 v-bind 指令将 isActive 属性传递给子组件：

<template>
  <child-component :is-active='true'></child-component>
</template>

在上述示例中，父组件将 isActive 属性设置为 true，并将其传递给子组件。作为结果，子组件的 div 元素将带有名为 'active' 的 CSS class。

通过这种方式，可以根据 props 参数的不同值来定位不同的 CSS class 类型。