【Vue 学习】style 标签的 scoped 属性和 lang 属性

style 标签的 scoped 属性和 lang 属性

在 App 组件中会使用多个组件，最终多个组件的样式会汇总到一起，可能会有多个组件的类名相同的情况出现，会发生后来者居上，出现覆盖的现象，后引入的组件会覆盖先引入的组件

此时就需要使用 scoped 属性来限制 css 样式的作用域

1. 使用 scoped 属性

如下，两个组件均有类名为 demo 的样式，会发生冲突，而使用 scoped 属性进行限制之后即可解决问题

School 组件

<template>
  <div class="demo">
    <h2>学校名称</h2>
  </div>
</template>


<script>
export default {
  name: "SchoolCom",
};
</script>

<style scoped="scoped" lane="css">
.demo {
  background-color: pink;
}
</style>

Student 组件

<template>
  <div class="demo">
    <h2>学生姓名</h2>
  </div>
</template>


<script>
export default {
  name: "StudentCom",
};
</script>

<style scoped="scoped" lane="css">
.demo {
  background-color: red;
}
</style>

2. 使用 lang 属性

lang 默认使用 css 规则来书写 css 样式，如果要使用 less，则需要安装 less-loader

npm i less-loader

<style scoped="scoped" lang="less">
.demo {
    background-color: red;
    h2 {
    	color: green;
    }
}
</style>

3. 小知识

• scoped="scoped" 可以简写为 scoped

• lang="css" 可以省略不写，因为 lang 默认值就是 css

• lang 的值可以为：css、less、sass、scss

• 对于 App 组件

  • App 组件中的 style 标签如果不加 scoped 属性，所有子组件均共享这些样式

    App 组件中的 style 标签如果加 scoped 属性，这些样式仅 App 组件独享，子组件不可使用