javascript - 为纯 VUE 组件添加样式

Question

我有一个 Element.js文件，这是一个像这样导出的 VUE 组件:

export default {
  template: `
    <div>
     <h1>Single-file JavaScript Component</h1>
     <p>{{ message }}</p>
    </div>
  `,
  data() {
    return {
      message: 'Oh hai from the component'
    }
  },
  style: `
    h1, p {
        color: red !important; /* NOT WORKING */
    }
  `
}

而不是通常的<template></template> <script></script> <style></style> [点]Vue结构。

使用第一个结构。 是否可以为其添加CSS样式？

我尝试使用 style prop 如上所示，但它不起作用。

Answer 1

作为The Single File Components文档说明你不能通过 CSS 做到这一点

No CSS support means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out

但您仍然可以使用 Binding-Inline-Styles为您的组件设置样式。

Vue.component('button-counter', {
  template: `
    <div>
     <h1 :style="style">Single-file JavaScript Component</h1>
     <p :style="style">{{ message }}</p>
    </div>
  `,
  data() {
    return {
      message: 'Oh hai from the component',
      style: {
        color: 'red'
      }
    }
  }
})
new Vue({ el: '#components-demo' })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="components-demo">
  <button-counter></button-counter>
</div>