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

Question

我有两个页面：

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

在 search.vue 中，我有 link 到 person.php。

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

我的 search.vue 组件中的 style 标签：

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

除了通过 href link 打开 person.php 页面外，我没有其他地方连接这两个视图。

Answer 1

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

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

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

来自Documentation：

The optional scoped attribute automatically scopes this CSS to your component by adding a unique attribute (such as data-v-21e5b78) to elements and compiling .list-container:hover to something like .list-container[data-v-21e5b78]:hover.

---

注意scoped属性是Vue针对单文件组件的特性，区别于一般的scoped style tag attribute，效果类似，但目前只有Firefox支持。