Добавить стиль к чистому компоненту 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 опорой, как показано выше, но она не работает.

Answer 1

В документации 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>