VueJS模板的CSS主机等效项是什么？

Question

VueJS模板的CSS主机等效项是什么？

cssvue.js

10

我之前尝试过Angular，后来转向Vue，发现他们组件中的:host选择器非常方便。简单来说，它将:host的样式应用于组件本身。

在<style scoped></style>部分，是否有与此相当的功能？

示例：

使用Scoped

父组件:

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

- Douglas Gaskell

每个Vue组件都有一个根元素（通常是<div>）。给它一个ID并对其应用规则。 - ceejayoz

我想避免这种情况，因为现在我需要确保组件中没有ID冲突，或者在使用这些组件的任何其他应用程序中也没有。同样，给它分配一个类也可能会产生类似的不良后果。我相信Vue有一种方法可以做到这一点？ - Douglas Gaskell

给它一个类名 - .host 或其他什么 - 该类名不会在主应用程序级别的 CSS 文件中使用，并将你的样式代码块作用域限定。这样做可以防止任何冲突。 - ceejayoz

Scoped CSS 可以防止您所担心的冲突问题。将类应用于组件的根元素，并在 CSS 中针对该类进行定位，就相当于使用 :host。 - tony19

问题在于子组件似乎会继承其父级的作用域 CSS。因此，如果我有一个子组件和一个父级，例如类.host，则子组件将具有应用于其上的父级.host的样式...这似乎有点不对，考虑到文档的编写方式？ - Douglas Gaskell

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jacob Goh · Accepted Answer

在Vue中没有与Angular的:host相对应的等效物。

最接近的方法是使用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 类被用作根 div 中的类名，其使用方式为 $style.container。

CSS 模块会默认生成唯一的类名以避免类名冲突，例如将 .container 转换成类似于 .container_7ba5bd90 的名称，当它作为 $style.container 使用时。

但如果要保留某些类的类名不被转换，可以使用 :global 包装它们。

（关于 :global 的说明可在此处找到：https://github.com/webpack-contrib/css-loader#scope）