何为scoped？+ /deep/深度选择解析

何为scoped？

在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

/deep/深度选择解析

/deep/深度选择器用于将全局的组件或者类的样式转换为局部的类从而达到在scoped内部添加样式后起作用的目的，比如要给scoped内部的.sys_info_box的子类组件添加样式，而.el-card__header属于全局组件，无法在局部scoped中起作用，所以可以在.el-card__header前加上/deep/

<style lang="scss" scoped>
    .main-computer /deep/ .el-card__body {
        padding: 0;
    }
</style>  //在局部（组件）样式表中，为全局组件<el-card>添加样式

 

转载于:https://www.cnblogs.com/minyDong/p/11294690.html