Блог

Итак, в Vue есть >>> и /deep/ для стилизации дочерних компонентов в стиле с ограниченной областью действия:

 <style scoped>
.local-class-name >>> .class-name-of-nested-component {
    ...
}
</style>
  

Но мне нужно другое.
Как мне оформить компонент, используя стиль с ограниченной областью действия, в зависимости от глобального имени класса?
Вот так:

 <style scoped>
.global-class-name .local-class-name {
    ...
}
</style>
  

Заранее благодарю вас!

Я не заметил, что он добавляет атрибут data только к последней части селектора.

Итак, приведенный выше пример уже работает, потому что он скомпилирован в следующий код:

 .global-class-name .local-class-name[data-v-ab5212] {
    ...
}