Question

我有一个第三方组件正在扩展-虽然我想重用模板和样式部分，但我需要更改其行为。因此，我的vue文件的内容如下所示：

<script>
import Foo from 'foo';
export default {
  name: 'Bar',
  extends: Foo
}
</script>

不幸的是，虽然Foo的模板部分已在我的Bar中重用，但样式部分却没有发生-我必须从Foo完整地复制它不会应用任何样式。

如何重用父母样式部分？

Answer 1

定义Vue组件时，有一个可选部分，您可以在其中放置内联CSS或导入外部文件。默认情况下，在创建组件时（为了进行参数调用，将其命名为any-component.vue），我将包括以下部分：

<style scoped>
    @import ‘./any-component.css’
</style>

scoped参数可防止CSS在DOM中传播到其他地方，因此样式仅应用于组件本身，而不会破坏其他组件。但是根据您的需要，您可以将其删除。

因此，这为您提供了两种解决方案：没有任何动作可以阻止您在没有范围限定符的情况下将CSS文件导入父级；或，将相同的CSS文件导入多个组件（当您想要一致的外观时）。为了避免意外的后果，我选择后者。

希望有帮助。