：Host CSS是否等效于VueJS模板？

Question

在切换到Vue之前，我尝试了Angular，并发现其组件中的:host选择器非常方便。其基本目的是将:host的样式应用于组件本身。

在.vue部分的<style scoped></style>文件中是否有与之等效的文件？

示例：

使用范围

父母：

<template>
  <div class="host">
      <layout-header :open-nav="openNav" @toggle-open="toggleOpen"></layout-header>
      <layout-sidebar :open-nav="openNav"></layout-sidebar>
      <layout-content></layout-content>
      <layout-footer></layout-footer>   
  </div>
</template>

<style scoped>
  .host {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
  }
</style>

内容：

（{<layout-content>）

  <div class="host">
    stuff
  </div>

<style scoped>
  .host{
    flex: 1;
  }
</style>

输出：

（为简单起见，删除了页眉，页脚和侧边栏。）

这将导致页眉，侧边栏，内容和页脚继承父css（如果它们具有.host类）。

HTML：

<div data-v-238e7577="" class="host">
  <div data-v-7412829c="" data-v-238e7577="" class="host">stuff</div>
</div>

CSS应用于子元素：

Answer 1

Vue中没有Angular的:host。

您将获得的最接近的结果是使用CSS module。

演示：https://codesandbox.io/s/o4orw9nz35中的App.vue

<template>
  <div id="app" :class="$style.container">
    <p class="red">p tag</p>
    <div class="blue">div tag</div>
  </div>
</template>

<style lang="scss" module>
.container :global {
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
}
</style>

请注意如何将.container类用作$style.container作为根div中的类。

CSS模块将为.container生成唯一的类名，使类名冲突不会发生。

---

:global会做什么？

CSS模块默认将CSS类名称转换为唯一的名称。

例如当.container用作.container_7ba5bd90时，将转换成类似$style.container的东西。

为避免在某些类上进行此转换，请使用:global来包装它们。

（here可以找到:global的说明。）