解释 详细的vue文件

中样式标记的几个标识符。vue文件

当生活快要绝望的时候，它被编辑提示的一个scopedSlots拯救了。

卧槽，这个属性的具体彩蛋用法是写到最后才发现的。详见最终解决方案。

问题背景

问题的根源

项目中使用了ElementUI框架，该框架与中的$style:[类名]和stylemodule绑定。vue文件。模板的现状。个人觉得用$style绑定写起来比较麻烦。不仅麻烦，更重要的是，没有办法直接影响和修改风格。templatespan: class=' $ style。“文本”./span/templatestylemodule。元素中的文本{ }/样式陷印点

不知道样式中使用模块的具体含义。在开发启动环境下，使用scoped来形成一个独立的作用域不会影响elemnt中组件的风格。使用scopedSlots识别样式标签后，问题就解决了。但是，开发环境是正常的，并且在部署后不起作用。

知道的风格标签。某视频剪辑软件

这应该与vue-loader的插件vue-laoder将解析组件并提取语言块的事实有关。必要时，它将由其他加载程序处理，最后组装成commonjs模块。事实上，一个对象将从导出默认值中出来。然后就是上面的模板，在挂载这个对象的模板属性之前，直接导入一些最近的样式文件也是可行的，但是当时没有考虑如何实现这些标识符。样式可以具有模块和范围属性，以将样式封装到组件中。默认情况下，具有不同封装模式的多个样式标签可以混合在一个组件中。样式加载器将提取内容，并通过样式标签将其添加到文档的头部。您也可以将webpack配置为单个。css文件。$style如何使用该模块

见： https://vue-loader-v14.vuejs.org/zh-cn/features/CSS-modules.html.

在样式中使用模块属性可以形成名为$style的计算属性，它可以在节点中动态绑定样式。

Span :class=' $ style。“文本”./span可以绑定到：类的对象/数组语法。

html中的类绑定是一种对象语法。如果data上的属性isRed为true，则属性名Red将被添加以形成属性控件span : class=' {[$ style。red]: is read } ' test/span script data(){ return { entries 3360[]，isred3360 true，} }，/scriptstyle模块。红色{ color:红色；}/style可以通过console.log(这个。$style.red)。您可以使用module=' '来更改名称$style。div:类=' aaa.root'/divstylelang=' less '模块=' aaa'/stylescoped的作用域是什么

当样式/样式标记有一个作用域属性时，它的css样式只在当前作用域中起作用

在使用scoped之后，父组件的样式不会深入到自组件中。

但是子组件的根节点既受父组件作用域的CSS影响，也受子组件作用域的CSS影响，但有一点是：如果我们给子组件添加一个类样式，我们可以一层一层地修改它。深度选择器3360或/深度/

已经验证了：在更低的条件下不会工作。已经验证：只在普通css下工作。根据网上的说法，手写笔可以用，但scss不行。v-html动态生成的样式没有受到范围内样式的影响，这一点还没有得到验证，但我认为可以通过增加类样式名来解决。(未经核实)

css范围的渲染方法远不如类的渲染速度

在递归组件中谨慎使用CSS样式。

在元素中混合样式的方法(todo)

样式是通过打包使用的，所以build文件夹中的样式目录为： element/Packages/Theme-chake/SRC/menu . scss，方便后期查看和求解过程

使用范围批次解决

该死的，再次测试后发现加scopedSlots没用，就跟什么都不写一样.我说，为什么，为什么我查了很久，没人用？被这东西救了真的够了.我当时骄傲了很久，觉得是发现了一个新世界，真的是6。添加scoped之后，我在子组件上添加了一个类名，发现没用。

错误仍然是：但是表层有一些数据-v注入

没有找到需要注射进去的条件，发现之前的判断大部分都是错的。

解决方案1:合作解决方案

去掉样式覆盖不了的部分，用原来的css样式，加上作用域，用语法糖注入样式作用域。main _ nav . El-menu . El-subscribe _ _ title { background-color : red；}/style解决方案2 :模块解决方案

使用模块选择属性，然后使用：global()选择该属性下的所有元素，然后选择不在作用域下但可以选择的元素。我个人一直认为这个选择方案可以区分css范围。但是后面分析起来就不灵活具体了。Style lang=' less '模块=' AAA '。红色{。项目{:全局(。El-子菜单_ _ title){背景：红色；} } }/style

摘要

中的样式。vue文件只有模块和作用域，没有其他机会主义方案。该模块形成表示属性的计算属性。默认名称为$style，其中：global()可以选择该区域下的所有元素。scoped形成的作用域可以用来覆盖子组件的样式，只有本机css支持。以上就是本文的全部内容，希望对大家的学习有所帮助。