Vue js - 制作一种由子组件继承的样式

Question

首先，当我想为当前组件设置一个私有样式时，我在标签内定义它。 为了让子组件的样式可见，我使用了一个深度选择器让它通过，如下所示：

<style scoped>
   .a >>> .b {
       ...
   }
</style>

上面的代码翻译成

.a[data-v-f3f3eg9] .b

也就是说：对于这个特定 a 的每个孩子，如果它是 b，则对其应用以下样式。

我的问题是关于以下陈述：

<style scoped>
   >>> .b {
      ...
   }
</style>

首先，Visual Code 会抛出一个关于这个表达式的错误：

[css] 规则或选择器预期

希望我在深度选择器之前放置一个范围选择器。 我想弄清楚的是，如果这个表达式按照文档中的说明进行了预处理，应该是

.b

那么是什么让这种风格不是全局的，并且与下面的定义不同（没有作用域）：

<style>
   .b {
       ...
   }
</style>

事实上，它们是不同的。我试过了，后者实际上是全局的，而前者对父组件和子组件可见。

有人对此有解释吗？并且，如果语法

<style scoped>
   >>> .b {
      ...
   }
</style>

这不是很常见，什么是只为子组件创建样式而不为父元素定义选择器的正确方法？

Answer 1

::v-deep 是不会扰乱 VSCode linter 的等价物：

<style scoped>
    ::v-deep .b {
        ...
    }
</style>

Answer 2

我认为制作仅用于子组件的样式而不为父组件定义选择器的唯一方法就是在子组件中定义此样式。

谨此！