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>

是否可以像我在lives { }中写下的样式那样使用常规HTML标记之类的组件标记？
我看到在css中编写<lives class="lives">并使用.lives { }有效，但这似乎有点多余，如果可以仅使用组件标记，则宁愿添加aditional类。
我知道Vue会将<lives>编译成HTML代码，并且没有＆＃34;生活＆＃34;标记为css在编译后使用，但仍然在想。

Answer 1

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

Vue组件具有template属性，它包含html标记。而且，您可以在template中使用自定义html标记。例如：

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

现在您可以按lives标记定义css规则。

Answer 2

自定义标记仍将出现在生成的HTML中，您可以使用它来使用CSS进行样式设置。有两点需要注意：

您需要为其提供display属性
您应该使用合法的标记名称，这基本上意味着have a hyphen in it

＆＃13;

new Vue({
  el: 'app',
  components: {
    myThing: {}
  }
});

＆＃13;

my-thing {
  background-color: red;
  display: block;
}

＆＃13;

<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>

＆＃13;

Answer 3

您可以使用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)

我希望这会有所帮助，干杯！

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

3 个答案: