Vue：通过 CSS 选择组件的最简洁方法是什么？

Question

我有一个bar组件。它是这样使用的：

<template>
  <div>
    <!-- stuff -->
    <bar></bar>
    <!-- stuff -->
    <!-- stuff -->
    <!-- stuff -->
    <bar></bar>
    <!-- stuff -->
    <bar></bar>
    <!-- stuff -->  
  </div>
</template>

<style lang="scss" scoped>
  @media (max-width: 1300px) {
    // this selector doesn't work, but it would be nice if it did
    bar {
      display: none;
    }
  }
</style>

当屏幕为 1300 像素或更窄时，我想隐藏条形元素。如果有一个这将是很好的bar元素选择，就像有p和h1元素选择。但是，似乎没有，我必须添加class="bar"才能选择它们。

我的问题是是否有更简洁的方法来选择bar元素。

在bar组件内部添加 CSS 代码是不好的，因为当在bar其他组件内部使用 s时，我根本不想隐藏它们。

Answer 1

上课似乎是最好的方式。如果您希望它对于组件通用，则将其放在组件的根元素上；如果您希望它特定于该用途，则仅将其放在组件标记上。

此外，您没有理由不能使用自定义标签作为组件的根元素；只要标签没有映射到组件，它就会保留在 DOM 中，并且您可以将其用于 CSS 选择。不过，我不推荐它，因为我认为这个用例不是引入新标签的充分理由。

例如，如果您的组件模板如下所示：

<template>
  <bar-container>
    Hi there
  </bar-container>
</template>

并且您没有bar-container定义组件，您将能够使用 CSS 来 select bar-container，这将是每个组件的容器元素bar。但它也同样易于使用<div class="bar-container">。