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

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

  • Table.vue
  • TableRow.vue

И стили, как это:

.table {
  table-layout: auto;

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

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

0
Johannes 5 Ноя 2019 в 19:27

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>
0
Afraz Ahmad 5 Ноя 2019 в 21:46
Это описывает то, что я уже знал. Кажется, вам придется пройти все классы самостоятельно; т.е. нет способа provide $style для всех дочерних элементов в дереве, что значительно упростило бы использование модулей css в компонентах.
 – 
Johannes
6 Ноя 2019 в 10:45