详解.vue文件中style标签的几个标识符

的文件夹中
样式目录为:

element/packages/theme-chalk/src/menu.scss

, 以方便后期的具体查看

解决过程

使用

scopedSlots

解决

我擦哦, 再次测试后, 发现添加

scopedSlots

并没有什么卵用, 和什么都不写是他妈一个样子啊.. 我说怎么, 怎么查了半天, 也没人用.
还被这玩意所拯救, 也真是够了..
当时还骄傲了半天, 还以为是发现了新天地, 也真是6了.

添加

scoped

之后, 在子组件上面添加类样式名, 发现并没有卵用

错误依旧: 只是在表面层上的有一些data-v的注入

没有找到需要注入到里面的条件, 发现自己前面大部分的判断都是错误的.

解决方案一:

scoped

方案

将无法进行样式覆盖的部分拿出来
使用原生的css样式, 添加scoped
使用

>>>

语法糖进行样式的注入

<style scoped>
.main_nav .el-menu .el-submenu >>> .el-submenu__title {
 background-color: red;
}
</style>

解决方案二:

module

方案

使用module进行属性的选择
然后是用:global()进行这个属性下面的全部选择
进而选中这个没有在作用域下面但是可以选择到的元素
个人始终认为这种选择方案, 可以做到css作用域的区分, 但是, 并不灵活
具体的以后再分析

<style lang="less" module="aaa">
.red {
 .item {
  :global(.el-submenu__title) {
   background: red;
  }
 }
}
</style>

总结

.vue文件中的

<style></style>

只有

module

和

scoped

, 没有其他取巧方案

module

形成一个代表属性的计算属性, 默认名称为

$style

, 其中的

:global()

可以进行这个区域下面的所有元素的选择.

scoped

形成的作用域, 可以通过

>>>

来进行子组件的样式覆盖, 带只要原生的css支持.