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

Question

我正在使用带有 Vue.js 的 Webpack 来创建一个大型 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 状态并根据您的要求更改不同的组件。