Vue.js修改其他组件的样式
Vue.js modify other component's style
我正在将 Webpack 与 Vue.js 结合使用来创建大型 Web 应用程序。我遇到的问题如下：
我正在使用 vue-router 和主应用程序模板的以下结构：
<customNav></customNav>
<router-view></router-view>
导航是一个单文件组件，在组件文件中定义了自己的样式。假设它默认为黑色背景。现在，在单一场合（通过路由器显示不同视图时），我希望它是透明的。
我想我可能只是覆盖路由器视图组件中的 CSS，但这不起作用，因为 Webpack 捆绑了我导入的所有 CSS 组件，我必须导入main.js 中的所有组件在路由器中定义它们。因此，覆盖组件中的样式会导致它成为全局默认值，即使该组件甚至未被使用。
我该如何解决这个问题？
你可以借助 VueJS 的 dynamic styling。您可以根据变量的值分配 class。所以在你的 customNav 你可以有两个 classes：说 black-bg 和 transp-bg 你可以改变这将帮助一个变量：blackBackground
<YourElem v-bind:class="{ 'black-bg': blackBackground, 'transp-bg'!blackBackground}"></YourElem>
我认为您可以通过两种方式更改此变量：
- 将其作为实例数据并根据当前路线进行更改。
- 将其置于 vuex 状态，并根据您的要求更改不同的组件。
我正在将 Webpack 与 Vue.js 结合使用来创建大型 Web 应用程序。我遇到的问题如下：
我正在使用 vue-router 和主应用程序模板的以下结构：
<customNav></customNav>
<router-view></router-view>
导航是一个单文件组件，在组件文件中定义了自己的样式。假设它默认为黑色背景。现在，在单一场合（通过路由器显示不同视图时），我希望它是透明的。
我想我可能只是覆盖路由器视图组件中的 CSS，但这不起作用，因为 Webpack 捆绑了我导入的所有 CSS 组件，我必须导入main.js 中的所有组件在路由器中定义它们。因此，覆盖组件中的样式会导致它成为全局默认值，即使该组件甚至未被使用。
我该如何解决这个问题？
你可以借助 VueJS 的 dynamic styling。您可以根据变量的值分配 class。所以在你的 customNav 你可以有两个 classes：说 black-bg 和 transp-bg 你可以改变这将帮助一个变量：blackBackground
<YourElem v-bind:class="{ 'black-bg': blackBackground, 'transp-bg'!blackBackground}"></YourElem>
我认为您可以通过两种方式更改此变量：
- 将其作为实例数据并根据当前路线进行更改。
- 将其置于 vuex 状态，并根据您的要求更改不同的组件。