在 vue.js 组件中扩展以使用父样式答案

【问题标题】：Extends in vue.js component to use parent style在 vue.js 组件中扩展以使用父样式
【发布时间】：2018-08-03 08:49:24
【问题描述】：

我正在扩展一个第三方组件 - 虽然我想重用模板和样式部分，但我需要更改它的行为。所以，我的 vue 文件的内容是这样的：

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

不幸的是，虽然Foo 的模板部分在我的Bar 中被重用，但样式部分不会发生同样的情况——我必须从Foo 完整复制它，否则将不会应用任何样式。

如何重用父母样式部分？

【问题讨论】：

标签： vue.js

【解决方案1】：

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

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

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

因此，这为您提供了两种解决方案：没有什么可以阻止您将 CSS 文件导入到没有范围限定符的父级； lor，将相同的 CSS 文件导入多个组件（当您想要一致的外观和感觉时）。为了避免意想不到的后果，我会选择后者。

希望对您有所帮助。

【讨论】：