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中有此状态和不同组件的更改。