vue中scoped 在文件引入中的作用

发布时间 2023-05-04 17:11:24作者: 盘思动

首先搞清楚scoped是干啥的?scoped的引入主要是上线了样式的模块化私有化,即当前组件的样式只对当前组件起作用。
当vue组件被vue-loader解析的时候,对于style上加了scope属性的组件,会主动加上data-v-xx的属性来唯一标识当前组件,若当钱组件内部存在子组件,只有子组件的最外层会加上唯一标识属性,子组件内部不受影响。

当vue文件引入css文件时候。
想用这个css文件来单独改变el-dialog的样式

发现加上scoped,引入的css文件就无效;
加了scoped,只对当前组件生效。el-dialog相当于另外一个组件,所以是无效的。
去了 scoped就可以生效了,但同时也意味着:这个css文件会作用全局.------css内容,加上某class来单独作用于这个文件;