scoped

没有加 scoped 属性，默认会编译成全局样式，可能会造成全局污染

<style></style>
<style scoped></style>

TIP 温馨提醒使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

::v-deep 深度选择器

有时我们可能想明确地制定一个针对子组件的规则。

为避免混淆的/deep/组合器，我们引入了另一个自定义组合器，::v-deep 这次更明确地说明这是 Vue 特定的扩展，并使用伪元素语法，因此任何预处理器都应能够解析它。

因为使用 scoped 后，父组件的样式将不会渗透到子组件中，所以可以使用以下方式解决

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

编译为

[v-data-xxxxxxx] .b {}