Vue-scoped

1.定义

作用：让样式在局部生效，防止样式冲突

原理：给每个组件的最外侧div添加一个id，这样就能有效的阻止样式冲突

写法:

<style scoped>
</style>

2.示例

假设我们需要写两个组件的css样式,假设我们样式的类名一样

在student.vue中

<div class="name"></div>

.name{
    width: 200px;
    height: 200px;
    background-color: yellow;
}

在School.vue中

<div class="name">     </div>

.name{
    width: 200px;
    height: 200px;
    background-color: red;
}

将两个组件注册到App.vue中

  <div id="app">
    <School ></School>
    <hr>
    <student></student>
  </div>

<script>
import School from './components/school.vue'
import Student from './components/student.vue'
export default ({
  name:'App',
  components:{School,Student},
  data(){
    return{
      
    }
  }

})
</script>

我们查看页面效果

会发现两个div都是黄色，这是因为我们定义组件样式的类名冲突了，我们在引入组件时，student的样式会覆盖掉school的样式，于是就造成了此现象，我们可以给style添加scoped解决此问题

给两个组建的style分别添加scoped

页面效果

冲突解决，原因是添加scoped后Vue给每个组件的最外侧div添加了一个id，渲染时会根据id来进行样式选择，这样就防止了样式冲突的现象