Question

Vue的初学者 - 所以对这个问题的讽刺是一个愚蠢的问题，或者我错过了一些东西;但我认为你能够定位自定义元素IE：

my-element {styles go here}

但是，当我创建了一个元素时，我似乎只能定位它包含的元素。 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>

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

Answer 2

如果您使用single-file components，则只能为该组件编写CSS，他们称之为scoped CSS。不要将此与obsolete css scoped attribute混淆;这是一个Vue功能。

你如何设计VueJS组件？

2 个答案: