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> [dot] Vue结构。

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

如上所述，我尝试使用style道具，但是它不起作用。

Answer 1

The Single File Components文档指出您无法通过CSS做到

不支持CSS 意味着，虽然将HTML和JavaScript模块化为组件，但是CSS明显地被忽略了

但是您仍然可以使用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>

为纯VUE组件添加样式

1 个答案: