：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>

输出：

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

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

HTML：

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

应用于子元素的CSS：

Answer 1

Angular 没有等价物 :hostVue 中。

你最接近的是使用CSS 模块。

演示：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 类名称转换为唯一的名称。

for eg.container将被转换成类似.container_7ba5bd90as 的东西$style.container。

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

（:global可以在此处找到 的解释。）