vue.js - vuejs组件的样式是否对其他组件是全局的

Question

我有两个页面:

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

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

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

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

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

除了通过 href 链接打开 person.php 页面外，我无法连接这两个 View 。

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 支持。