scoped解决样式冲突

1.默认情况：

写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

1. 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响
2. 局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件

2.代码演示

One.vue

<template>
  <div class="one">
    BaseOne
  </div>
</template>

<script>
  export default {

  }
</script>
<style scoped>
</style>

Two.vue

<template>
  <div class="Two">
    BaseTwo
  </div>
</template>

<script>T
  export default {

  }
</script>

<style scoped>
</style>

App.vue

<template>
  <div id="app">
    <One></One>
    <Two></Two>
  </div>
</template>

<script>
  import BaseOne from './components/One'
  import BaseTwo from './components/Two'
  export default {
    name: 'App',
    components: {
      One,
      Two
    }
  }
</script>

3.scoped原理

1. 当前组件内标签都被添加data-v-hash值 的属性
2. css选择器都被添加 [data-v-hash值] 的属性选择器

最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到