Vue.js 2、在css中使用自定义组件标签名称？

Question

<template>
    <header>
        <hamburger></hamburger>
        <app-title></app-title>
        <lives></lives>
    </header>
</template>

<script>
export default {
    name: 'Titlebar',
    data() {
        return {

        }
    }
}
</script>

<style lang="scss" scoped>
    @import "../styles/variables";

    header {
        padding: $padding-titlebar;
        position: relative;
    }
    lives {
        position: absolute;
        right: 2.5vh;
    }
</style>

是否可以像任何常规 HTML 标签一样使用组件标签来实现样式目的，就像我在 中写下的那样lives { }？
我发现在 css 中编写<lives class="lives">和使用.lives { }是可行的，但这似乎有点多余，如果可以只使用组件标签，宁愿省略添加其他类。
我知道 Vue 编译<lives>成 HTML 代码，并且编译后的 css 没有“lives”标签可供使用，但仍然想知道。

Answer 1

Vue 组件的名称与 css 规则没有关系，但确实有关系template。

Vue组件有一个template属性，它包含html标签。而且，您可以在template. 例如：

template: `<lives class="lives">{{a}}</lives>`

所以现在你可以通过标签定义CSS规则lives。