css - :Host CSS equivalent for VueJS Templates?

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 的 :host 在 Vue 中没有等价物。

您最接近的是使用 CSS module .

演示 App.vue in https://codesandbox.io/s/o4orw9nz35

<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 在用作 $style.container 时将被转换为类似于 .container_7ba5bd90 的内容。

要避免对某些类进行这种转换，请使用 :global 来包装它们。

(关于:global的解释可以在here中找到。)