vuejs组件的样式对其他组件来说是全局的吗

Question

我有两页：

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

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

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

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

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

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

Answer 1

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

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

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

来自文档：

可选scoped属性通过向元素添加唯一属性（例如data-v-21e5b78）并编译.list-container:hover为类似.list-container[data-v-21e5b78]:hover.

请注意，该scoped属性是针对单文件组件的 Vue 特性，与一般的scoped样式标签属性不同，后者具有类似的效果，但目前仅 Firefox 支持。