何為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>添加樣式