Vue.js 다른 구성 요소의 스타일을 수정하십시오.

Question

Vue.js와 함께 Webpack을 사용하여 대규모 웹 응용 프로그램을 만듭니다. I 발생할 문제는 다음

I VUE 라우터를 사용하고했습니다 및 주요 응용 프로그램 템플릿에 대한 다음과 같은 구조 :

<customNav></customNav> 
<router-view></router-view> 

탐색 정의 자신의 스타일을 가지고 하나의 파일 구성 요소입니다 구성 요소 파일 내부. 기본적으로 검정색 배경이 있다고 가정 해 봅시다. 자, (라우터를 통해 다른 뷰를 보여줄 때) 한 번에, 나는 그것을 투명하게하고 싶습니다.

라우터보기 구성 요소에서 CSS를 덮어 쓸 수 있다고 생각했지만 Webpack이 가져온 구성 요소의 CSS를 모두 번들로 묶어서 main.js의 모든 구성 요소를 가져와야하므로이 기능이 작동하지 않습니다. 라우터에서 정의하십시오. 따라서 구성 요소의 스타일을 덮어 쓰면 구성 요소가 사용되지 않더라도 전역 기본값이됩니다.

어떻게이 문제를 해결할 수 있습니까?

Answer 1

VueJS의 dynamic styling 도움을받을 수 있습니다. 변수의 값에 따라 클래스를 할당 할 수 있습니다. 당신의 customNav 당신은 두 개의 클래스를 가질 수있는 그래서 : black-bg 말하고 transp-bg하고이 변수의 도움이 될 것입니다 변경할 수 있습니다 blackBackground

<YourElem v-bind:class="{ 'black-bg': blackBackground, 'transp-bg'!blackBackground}"></YourElem> 

나는 당신이 두 가지 방법으로이 변수를 변경할 수 있습니다 생각 :

• 이것을 인스턴스 데이터로 사용하고 현재 경로를 기반으로 변경하십시오.
• vuex 상태에 있으며 요구 사항에 따라 다른 구성 요소가 변경됩니다.