Vue.js修改其他组件的样式

Question

我正在使用Webpack和Vue.js来创建一个大型的Web应用程序。我遇到的问题如下：

我正在使用vue-router和主应用程序模板的以下结构：

<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状态下执行此操作，并根据您的要求更改不同的组件。