向纯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> dotVue结构中。

使用第一种结构。可以添加CSS样式吗？

如上面所示，我试过使用style道具，但它不起作用。

Answer 1

正如单文件组件文档所指出的那样，您不能通过CSS进行操作。

No支持意味着当JavaScript和JavaScript被模块化为组件时，CSS明显地被忽略了。

但是您仍然可以使用装订-内联风格对组件进行样式化。

​

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>

​