Vue - 更改范围 <style> 中的内容？答案

【问题标题】：Vue - change contents in scoped <style>?Vue - 更改范围 <style> 中的内容？
【发布时间】：2019-09-23 08:28:20
【问题描述】：

如果我能找到一种方法来使用一些 Vue 变量来更改我的 Vue 组件中的 <style> 块的内容，那就太好了。

对此的常见问题和答案涉及使用内联样式，或使用 javascript 访问 .style 属性，但我希望在这里更改滑块轨道和伪元素，就像这个问题一样：.slider::-webkit-slider-thumb needed in javascript

如果 Vue 的官方立场是 <style>s 是静态的，等等 - 有没有人希望他们有像 <style scoped dynamic> 这样的系统，样式表的内容可以由 Vue 控制？

【问题讨论】：

您可以将样式放入 JS 中，然后通过作用域插槽公开它们。例如，您可以拥有：<myComponent scoped-slot={'styles'} :styleProp="incomingStyle"> 类似于拥有 isActive 样式。
您能否详细说明您的“incomingStyle”会有什么样的内容？

标签： css vue.js

【解决方案1】：

我能够根据这个答案 (How to override scoped styles in Vue components?) 使用非作用域的父组件获得工作结果，该选择器具有超过子组件样式重要性的选择器。正如答案所说，使用“#app”作为选择器的开头就可以完成这项工作 - 对我来说，绊脚石只是向父组件添加了一个非作用域样式块。

但是它不是那么通用，我想了解“将样式放入 JS”是什么意思，以及它是否还会提供覆盖伪元素样式的方法。

【讨论】：