为什么不使用 `::v-deep` 选择器就可以在 Vue2 中定位子组件?

Why does targeting a child component work in Vue2 without using the `::v-deep` selector?

我在 Vue 2.x 中有一个项目,我想知道为什么使用 /deep/ 定位子组件的 class 可以 而不用 ::v-deep>>> 个选择器。

我在项目中使用这些:

"node-sass": "5.0.0",
"sass": "1.32.12",
"sass-loader": "10.1.1",

此外,我还创建了一个 sandbox 来实时演示该问题。

如果我在父组件中,我甚至可以在 scoped 样式中定位子组件,如下所示:

<style lang="scss" scoped>
  .parent-component {
    .child-component {
      /* I set the child components background color even though I don't use a `deep` selector */
      background-color: blue;
    }
  }
</style>

在子组件中我有:

<style lang="scss" scoped>
  .child-component {
    /* I'm overwritten by the parent component */
    background-color: red;
  }
</style>

根据我对作用域样式如何工作的理解,如果我不在父级中做这样的事情,这实际上是行不通的:

<style lang="scss" scoped>
  .parent-component {
    ::v-deep .child-component {
      background-color: blue;
    }
  }
</style>

您可以在不使用 ::v-deep 的情况下仅影响子组件的根元素。如果这样写,样式将不会被应用。

<template>
  <div>
    <div class="child-comp">
      How in the world am I styled without /deep/ or ::v-deep or >>>
    </div>
  </div>
</template>