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