Vue.js修改其他組件的樣式

Question

我正在使用Webpack與Vue.js創建一個大型的Web應用程序。我遇到的問題是：

我已經正在使用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中有此狀態和不同組件的更改。