vue.js - 视觉 : What is the cleanest way to select a component via 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 时，我不根本不想隐藏它们。

Answer 1

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

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

如果您的组件模板看起来像这样，例如:

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

而你没有 bar-container组件已定义，您将能够使用 CSS 来选择 bar-container ，这将是每个 bar 的容器元素成分。但它同样易于使用 <div class="bar-container">相反。