Vue.js 2，在css中使用自定义组件标记名称？
Vue.js 2，在css中使用自定义组件标记名称？
提问于 2017-08-15 17:50:50
<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>有没有可能像我在lives { }中写的那样，使用组件标签像任何常规的超文本标记语言标签一样来设置样式？
我发现在css中编写<lives class="lives">和使用.lives { }是可行的，但这似乎有点多余，如果可以只使用组件标记，我宁愿省略添加额外的类。
我知道Vue将<lives>编译成HTML代码，并且编译后没有"lives“标签可供css使用，但仍在疑惑。
回答 3
Stack Overflow用户
发布于 2017-08-15 18:01:13
Vue组件的名称与css规则无关，但它的template与之相关。
Vue组件有一个template属性，它包含html标签。此外，您还可以在template中使用自定义html标记。例如：
template: `<lives class="lives">{{a}}</lives>`所以现在您可以通过lives标记来定义css规则。
Stack Overflow用户
发布于 2017-08-15 21:14:04
自定义标记仍将出现在生成的HTML中，您可以使用它通过CSS设置样式。需要注意的两件事：
- 你需要给它一个
display属性 - 你应该使用一个合法的标记名，这基本上意味着have a hyphen in it
new Vue({
el: 'app',
components: {
myThing: {}
}
});my-thing {
background-color: red;
display: block;
}<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<my-thing inline-template>
<div>This should be red</div>
</my-thing>
</div>
Stack Overflow用户
发布于 2018-08-25 23:48:24
您可以使用vue-custom-element：
https://github.com/karol-f/vue-custom-element
首先，将您的组件注册到：
Vue.customElement('widget-vue', {
props: [
'prop1',
'prop2',
'prop3'
],
data: {
message: 'Hello Vue!'
},
template: '<p>{{ message }}, {{ prop1 }}, {{prop2}}, {{prop3}}</p>'
});然后您可以执行以下操作：
widget-vue {
display: block;
background: red;
...
}如果您想注册单个文件组件，请按如下方式注册您自己的组件：
import TopBar from '@/components/core/TopBar'
Vue.customElement('top-bar', TopBar)我希望它能帮上忙，干杯！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45690472
复制相关文章
相似问题
腾讯云开发者
