Как передать классы, сгенерированные модулем CSS, компонентам в Vue

Question

Я хочу использовать CSS Modules, но похоже, что у vue отсутствует механизм для предоставления сгенерированных имен классов дочернему компоненту.

Предположим, у меня есть два компонента:

• Table.vue
• TableRow.vue

И такие стили:

.table {
  table-layout: auto;

  &.hover .row:hover .cell {
    background-color: red;
  }
}

Сгенерированные стили для .row:hover не применяются к TableRowбольше, и я не нашел хороший способ передать его ребенку. Единственное, что я попробовал, это работает, но это очень уродливо - это передача объекта $style ребенку. Как только дерево компонентов становится больше, это очень раздражает, потому что каждый компонент нуждается в prop и должен передавать объект $style следующим дочерним элементам ...

Answer 1

Вы можете присвоить класс компоненту, используя v-bind, если они исходят из переменной

<div :class="list_view === 'list' ? 'at-listview' : 'at-groupview'"></div>

В приведенном выше примере list_view является переменной

Если вы хотите отправитьэти классы для любого компонента, опять же концепция та же, но на этот раз отправка классов в подпорке

<child-component classes_to_send="class1 class2 class" />

ИЛИ (с помощью двоеточия : для привязки переменной)

<child-component :classes_to_send="class_from_variable" />

Теперь вы можете получить эти классы в <child-component/> реквизитах, как показано ниже:

<script>
   ...
   export default:{
      props:['classes_to_send'],
   }


   ...
</script>
<template>
   <div :class="classes_to_send"></div>
</template>