vue中style scoped属性的作用和原理以及scoped穿透

一、为什么要给style 节点加 scoped 属性（vue）

1、作用：当style标签里面有scoped属性时，它的css只作用于当前组建的元素。在单页面项目中可以使组件之间互不污染，实现模块化（实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块）。
2、实现原理： style 标签中添加 scoped 属性后，vue 就会为当前组件中的 DOM 元素添加唯一的一个自定义属性（唯一性的标记）【data-v-xxx】,即CSS带属性选择器，以此完成类似作用域的选择方式，从而达到样式私有化，不污染全局的作用。
注意：实际开发中，建议在每个组件的 style 身上都加上 scoped 属性。

二、深度选择器

在给当前组件的 style 添加了 scoped 属性后，如果想 在父组件中修改子组件的样式 ，就需要使用 深度选择器 。