css - 你如何设计 VueJS 组件的样式？

Question

Vue 初学者 - 很抱歉这是一个愚蠢的问题，或者我错过了什么；但我假设您能够定位自定义元素，IE:

my-element { 样式放这里}

但是，当我创建一个元素时，我似乎只能定位它包含的元素。 EG - 我创建了一个导航栏元素(如下)，但我只能在其中设置实际的 nav/img/a 元素的样式 - 就像您通常那样，如果这有意义的话？

Vue.component
('nav-bar', {
            template:   '<nav>'+
                        '<img src="" alt="header-logo">'+
                        '<div class="ui-component">'+
                        '<input type="text">'+
                        '<a href="#">logout</a>'+
                        '</div>'+
                        '</nav>'
        });
        var nav = new Vue({
            el: '#nav'
        });

我是不是遗漏了什么，或者你只能在 vue 中设置网页元素的样式而不是自定义元素？

Answer 1

如果您已经创建了一个 nav-bar 组件，您可以简单地为您的自定义组件分配一个类来进行样式设置，如下所示:

<nav-bar class="my-css-selector"></nav-bar>

这是向自定义元素添加选择器的完美合法方式。