순수 VUE 구성 요소에 스타일 추가

순수 VUE 구성 요소에 스타일 추가

나는 가지고 있다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위와 같이 받침대가 작동하지 않습니다.

싱글 파일 컴포넌트 문서에는 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>

언급URL : https://stackoverflow.com/questions/51183353/add-style-to-pure-vue-component