Vue 中的 scoped

作用

实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块。

原理

在DOM结构中可以发现,vue通过在DOM结构以及css样式上加了唯一标记,达到样式私有化,不污染全局的作用。（如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性。）

劣势

因为权重的问题，如果是在子组件使用了scoped，那么在父组件中是不能直接修改子组件的样式的，需要在父组件中使用vue的深度作用选择器；动态添加的html片段不展示。