是否可以使用作用域从子级样式化父级？答案

【问题标题】：Is possible to styling parent from child with scoped?是否可以使用作用域从子级样式化父级？
【发布时间】：2021-07-15 09:54:08
【问题描述】：

伙计们，我已经尝试为我的父类设置样式，但在子组件内部的范围样式中像这样

子组件

<style lang="sass" scoped>
  .public-page
    overflow: unset
</style>

哪个父组件类是这样的

.public-page
  flex: 1
  overflow: hidden
  width: 100vw
  font-size: 14px !important
  color: #233142

有可能吗？提前致谢

【问题讨论】：

可以通过this.$parent 访问父组件（及其样式），但强烈建议您在大多数情况下这样做，因为它非常紧密地连接您的组件（如果这些组件没有在这个确切的配置中使用，样式会很奇怪，并且不清楚是什么原因造成的）。对于这个用例，我将向父组件添加一个类来取消设置溢出，并在需要时有条件地将其添加到类列表中（例如，从子组件的发出事件）。组件工作流程非常适合使用 BEM css 架构。

【解决方案1】：

没有。

html5 的<style scoped> 有一个短暂而有用的生命，但已不复存在。它已经过时了。在What is the current state of the "scoped" attribute for the style element in HTML5?进行一些讨论
Vue.js's <style scoped> 适用于当前组件。

【讨论】：

<style scoped> 仍然在 .vue SFC 中广泛使用。我相信这与过时的 HTML5 实现无关。在编译期间，webpack/vue-loader 会解释每个 SFC 中的 <style> 标签，以将其添加到主 css 文件中。然后 scoped 属性使得每个生成的 DOM 节点都获得一个唯一的数据属性，并且该组件中的所有样式规则都获得该唯一数据属性的后缀选择器，从而有效地限定每个组件的样式。
那么看看vue-loader.vuejs.org/guide/… — vue.js 的<style scoped> 适用于 current 组件？