王元肉==>个人主页

推荐阅读

文章结构

• scoped是什么？
• scoped的作用是什么？
• • 描述
  • 实践
  • • 前置环境
    • 出现bug
    • 解决bug
• scoped的原理

scoped是什么？

vue-cli中style标签的一个属性

scoped的作用是什么？

描述

我们来看使用vue-cli初始化的vue项目，HelloWorld组件中的官方注释，“将“ scoped”属性添加到仅限此组件的CSS”

实践

前置环境

我们声明一个HelloWorld组件，外层div有一个style类mian，其中将文字定义成红色，style标签不定义scoped属性，在App组件中使用HelloWorld组件。此时效果正常，文字颜色为红色。

<template>
  <div class="main">
    文字颜色
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.main {
  color: red;
}
</style>

<template>
  <div class="app">
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>

</style>

我们打开google调试控制台，查看元素，在整个项目中只有一个style标签

出现bug

假设我们现在在App组件style中也定义了一个.mian，会发生什么呢？

<template>
  <div class="app main">
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
.main {
  color:skyblue;
}
</style>

此时HelloWorld组件中的文字变成了天蓝色。为什么呢？我们打开控制台查看。

App组件中的样式定义在HelloWorld组件中的样式后面。然后类名都是.main，类名冲突，
优先级相同，后定义的覆盖先定义的。

解决bug

很明显，我们找到了问题所在，样式类名冲突了。那我们使用scoped吧。

<template>
  <div class="main">
    文字颜色
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- <style scoped> -->
<style scoped = true>
.main {
  color: red;
}
</style>

scoped的原理

看了前面的分析，scoped帮我们解决了类名冲突，那么vue是怎么设计的呢？是怎么做到
类名不冲突的呢？我们F12查看一下刚才的页面

原来scoped会给当前组件中所有类名修饰的元素添加一个自定义属性data-v-xxxxxx，
然后将之前的类名选择器更改成属性选择器了。且我们猜想等知，vue底层赋予的这个
自定义属性的名称一定是唯一的。这就是scoped的原理。

结束啦！