如何在注册该组件时为vue.js组件定义css样式？

Question

我能够注册自定义vue.js组件

// register
Vue.component('my-component', {
  template: '<div class="my-class">A custom component!</div>'
})   

另见https://vuejs.org/v2/guide/components.html

如何为我的组件包含css类？

我希望有类似的东西

 Vue.component('my-component', {
      template: '<div class="my-class">A custom component!</div>',
      css: '#... my css stylesheet...'
    })

但似乎没有css选项。

我知道我可以

a）在全局css样式表或中定义所有css类

b）使用singe-file-vue-components（需要构建工具支持* .vue文件，请参阅qazxsw poi）

但我更愿意

c）在注册组件时为组件指定一个css样式表。

=>怎么做？

Answer 1

似乎没有css选项。

那是正确的。你不能做你描述的。 https://vuejs.org/v2/guide/single-file-components.html非常清楚，其中一个优点是你可以用它们做到这一点，没有它们就无法做到。

在许多Vue项目中，将使用documentation on single file components定义全局组件，然后使用Vue.component定位每个页面正文中的容器元素。

这对于中小型项目非常有效，其中JavaScript仅用于增强某些视图。然而，在更复杂的项目中，或者当您的前端完全由JavaScript驱动时，这些缺点变得明显：

[...]没有CSS支持意味着当HTML和JavaScript被模块化为组件时，CSS显然被忽略了

Answer 2

确实，您不能在Vue模板中添加new Vue({ el: '#container' })或直接在组件中添加CSS，除非您绑定它或全局定义您的CSS。但是您可以创建一个自动组件来动态地为您完成。 <style>

Answer 3

请记住，Vue组件实际上是宏。

其中sample是替代函数，而render（下面的vueDefinition）实际上是给定defn3的class。

如果你不提供自己的tagName函数，template只是一个方便的句法 - 糖速记，将compiled（有一些vue使用模式限制）变成render函数。

render

有了这个解决方案，为什么你可能不希望像我刚才提供的那样简单化，有很多很好的理由。

也就是说，您希望将您的css模块化，使其不会影响您不想要的页面的任何方面。为此，您需要精心设计的css规则以及您的预期继承和范围;可能使用

const defn3 = {
  tagName: 'ae-css',
  mounted() {
    const vueDefinition = this.$options;
    this.$el.appendChild(document.createTextNode(vueDefinition.css));
  },
  css: `
    * {
      color: blue;
    }
  `,
  render(h) {
    return h('style');
  }
}
Vue.component(defn3.tagName, defn3);

。但更好的方法是使用Vue自动提供类似功能的设施。

如果你想为此使用现代浏览器架构功能，那么你可能希望你的组件是真正的浏览器DOM class=..，它们使用shadowDOM并保持你的内部元素和样式封装在WebComponents中。请参阅shadowRoot，以便在Vue中完成此操作。