vue组件css样式 - 使用 scoped 实现样式私有化

vue组件中使用 scoped 实现样式私有化

首先做一个测试
在app.vue添加h1标签，

<template>
  <div id="app">
    <h1>app.vue</h1>
  </div>
</template>

改变标签内容颜色,

`<style> h1 { color: #f00; } </style>

新建的组件users.vue中添加h1标签，

<template>
  <div class="users">
    <h1>users.vue</h1>
  </div>
</template>

改变标签内容颜色,

<style>
h1 {
  color: #0f0;
}
</style>

页面显示效果

users.vue中的样式设置被覆盖
此时使用scoped

<style scoped>
h1 {
  color: #0f0;
}
</style>

页面显示效果

在DOM中可以观察到scoped自动为组件标签添加了data-v-属性

使用scoped实现了样式私有化