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

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

在vue项目里面经常在页面下面的style标签上面加上scoped属性，在面试中也常问，今天就来说说这个问题：

1、作用

当style标签里面有scoped属性时，它的css只作用于当前组建的元素。在单页面项目中可以使组件之间互不污染，实现模块化。

2、实现原理：

1. style 标签中添加 scoped 属性后，vue 就会为当前组件中的 DOM 元素添加唯一的一个自定义属性 v-data-xxx。

2. 然后 css 选择器会通过这个自定义属性去选中元素，从而解决演示冲突的问题。

注意：实际开发中，建议在每个组件的 style 身上都加上 scoped 属性

---

深度选择器

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