У меня есть некоторые компоненты базового класса Base и дочерние компоненты, которые называются Child1 и Child2. У меня также есть несколько базовых стилей в компоненте Base, но я хочу перезаписать его у детей. Это не работает так, как я ожидаю, потому что один из стилей дочернего компонента перезаписывает другой дочерний.
Базовый компонент:
<template>
<div class="communicate">
Blabla
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
@Component ({})
export default class Base extends Vue {}
</script>
<style lang="scss">
//not scoped
.communicate {
color: red;
}
</style>
Детский 1 компонент:
<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import Base from './Base.vue';
@Component ({})
export default class Child1 extends Base {}
</script>
<style lang="scss" scoped>
.communicate {
color: blue;
}
</style>
и аналогичный компонент Child2:
<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import Base from './Base.vue';
@Component ({})
export default class Child2 extends Base {}
</script>
<style lang="scss" scoped>
.communicate {
color: green;
}
</style>
Цвет всегда синий, событие в компоненте Child2.
Привет