vuejs组件的样式是否对其他组件是全局的

Question

我有两页：

1. search.php包含名为search.vue
的vuejs组件
2. person.php包含另一个名为person.vue的组件。

在search.vue，我有person.php的链接。

为什么组件search.vue中设置的样式也会影响person.vue中的DOM？

style组件中的search.vue标记：

<style>
  .row {
    background-color: red;
  }
</style>

我无处可通过href链接连接这两个视图，以打开person.php页面。

Answer 1

Vue单文件组件的style标记中定义的样式将被编译为单个文件，影响所有组件。

但是，您可以在组件的scoped标记上指定style属性：

<style scoped>
  .row {
    background-color: red;
  }
</style>

来自Documentation：

  

通过向元素添加唯一属性（例如scoped）并将data-v-21e5b78编译为.list-container:hover之类的内容，可选的.list-container[data-v-21e5b78]:hover属性会自动将此CSS范围限定到您的组件。

请注意，scoped属性是单文件组件的Vue功能，与常规scoped style tag attribute不同，后者具有类似的效果，但目前仅受Firefox支持。