vue scoped详解

你是不是有这样的烦恼：怕其他组件的样式扰乱当前组件的样式？
这儿有个解决方式 Scoped

何为Scoped???

表示它的样式只作用于当前模块，是 样式私有化
设计的初衷就是让样式变得不可修改
渲染的规则/原理：
  给Html的DOM节点添加一个 不重复的data属性 来表示 唯一性
  在对应的 Css选择器 末尾添加一个当前组件的 data属性选择器 来
    私有化样式，如：.button[data-v-2311c06a]{}
  若组件内部包含其他组件，只会给其他组件的最外层标签加上当前组件的
    data属性
  具体原理代码如下所示：

<template>
  <div class="example">h1</div>
</template>
<style scoped>
  .example{
    color:red;
  }
</style>

// vue编译渲染完之后，如下所示

<tempalte>
  <div class="example" data-v-f3f3eg9>hi</div> 
</template>
<style>
  .example[data-v-f3f3eg9]{
    color:red
  }
</style>

注意事项：添加scoped则父组件无法修改子组件的样式；呀！要是有修改的需求可咋办嘞?别急，接着看（斜眼笑）

1.采用全局属性和局部属性混合的方式
2.每个组件在最外层添加一个唯一的class区分不同的组件
3.使用深层选择器deep

<!--     方式一，在同一个组件里采用局部全局的方式     -->
<style>
  /* 全局样式 */
</style>
<style scoped>
  /* 本地样式 */
</style>

<!--     方式三，Scoped     -->
<!-- 子组件 -->
<div class="gHeader">
  <div class="name"></div>
</div>
<!-- 父组件 -->
<template>
  <div id="app">
    <gHeader></gHeader>
  </div>
</template>
<style lang="css" scoped>
  .gHeader >>> .name{          <!-- 第一种写法  >>> -->
    color:red;
  }
  .gHeader /deep/ .name{      <!-- 第二种写法  deep,sass之类的预处理器无法解析>>>操作，可以采用此种方式 -->
    color:red;
  }
</style>

希望这篇文章能够帮你更深入了解vue中Scoped的用法，如有错误欢迎指正！！！