Vue:通过 CSS 选择组件的最简洁方法是什么? [英] Vue: What is the cleanest way to select a component via CSS?
问题描述
我有一个 bar 组件.它是这样使用的:
<div><!-- 东西--><bar></bar><!-- 东西--><!-- 东西--><!-- 东西--><bar></bar><!-- 东西--><bar></bar><!-- 东西--></模板><style lang="scss" 作用域>@media(最大宽度:1300px){//这个选择器不起作用，但如果它起作用就好了酒吧 {显示:无；}}</风格>
当屏幕为 1300 像素或更窄时，我想隐藏栏元素.如果有 bar 元素选择器就好了，就像有 p 和 h1 元素选择器一样.但是，似乎没有，我必须添加 class="bar" 才能选择它们.
我的问题是是否有更简洁的方法来选择 bar 元素.
在 bar 组件中添加 CSS 代码是不好的，因为当 bar 在其他组件中使用时，我不根本不想隐藏它们.
课堂似乎是最好的方式.如果您希望它对组件通用，请将其放在组件的根元素上，或者如果您希望它特定于该用途，则仅放在组件标签上.
此外，没有理由不能使用自定义标签作为组件的根元素；只要标签没有映射到组件，它就会留在 DOM 中，您可以将其用于 CSS 选择.不过，我不推荐它，因为我认为这个用例不是引入新标签的好理由.
如果您的组件模板如下所示，例如:
<条形容器>你好呀</bar-container></模板>并且您没有定义 bar-container 组件，您将能够使用 CSS 来选择 bar-container，这将是每个 bar 组件.但是使用 <div class="bar-container"> 也很容易.
I have a bar component. It is used like this:
<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>
I would like to hide the bar elements when the screen is 1300px or narrower. It would be nice if there was a bar element selector, just like there are p and h1 element selectors. However, there doesn't seem to be, and I have to add class="bar" in order to select them.
My question is if there is a cleaner way to select the bar elements.
It wouldn't be good to add the CSS code inside of the bar component because when the bars are used inside of other components, I don't want to hide them at all.
A class seems to be the best way to go. Put it on the root element of the component if you want it to be universal for the component, or only on the component tag if you want it to be specific to that use.
Also, there is no reason you couldn't use a custom tag as the root element of your component; as long as the tag didn't map to a component, it would be left in the DOM, and you could use it for CSS selection. I don't recommend it, though, as I don't think this use case is a good reason for introducing a new tag.
If your component template looked like this, for example:
<template>
<bar-container>
Hi there
</bar-container>
</template>
and you had no bar-container component defined, you would be able to use CSS to select bar-container, which would be the container element for every bar component. But it's just as easy to use <div class="bar-container"> instead.
这篇关于Vue:通过 CSS 选择组件的最简洁方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
