vue.js - 한 구성 요소에서 다른 구성 요소로 스타일을 바꿔 넣으십시오.

Question

이 질문은 webpack 구성을 사용하는 상용구에서 작동하는 vue.js에 관한 것입니다.

구성 변수 father에서 구성 요소 son으로 동적으로 sass 변수를 전달해야합니다 (이름 지정의 편의성을 위해).

(구성 요소 father)에 액세스 할 수 있습니다. 스타일 태그에서 변수 $color에 액세스 할 수 있습니다. 와 나는이 HTML 템플릿을 사용하여 son 구성 요소에 전화 해요 :

// father component 
    <template> 
     <son></son> 
    </template> 
    <style lang='sass' scoped> 
     @import 'assets/sass/color'; 
    </style> 

수입 말대꾸 변수는 $color 필요가의 아들이 단순한 DIV라고하자 father에서 온 son

의 배경을 변경할 수 있습니다.

// son component 
    <template> 
     <div></div> 
    </template> 

    <style lang=sass scoped> 
     div { 
      width: 200px; 
      height: 200px; 
     } 
    </style> 

어떻게해야할까요? 당신이 말대꾸를 수입 및 사용과 같은 바인딩 수

Answer 1

,

<p v-bind:style="[baseStyles, overrideStyles]"> 
baseStyles and overrideStyles 
</p> 

편집

또는 당신이 할 수있는 일 게다가 당신의 범위 stylings가의

<template> 
    <div v-bind:class="$style.my_component">Hello</div> 
</template> 
<style module> 
    .my_component { 
     color: purple; // still the best color ever 
    } 
</style> 

Answer 2

는 글로벌 사용할 수 있습니다 같은 하위 구성 요소에 노출되는 동일한 구성 요소에있는 구성 요소 scoped 키를 사용하지 않고 구성 요소에 새 스타일 태그를 추가하기 만하면됩니다.

구성 요소가 어떻게 든 생겼을 수 있습니다.

<style> 
/* global styles */ 
</style> 

<style scoped> 
/* local styles */ 
</style> 

Source 배열 내부에 그 값이 말대꾸 값으로 선언 된 경우