从子组件触发应用级别样式更改

Posted 2023-02-23

【中文标题】从子组件触发应用级别样式更改

【英文标题】：trigger app level style changes from a child component

【发布时间】：2020-12-09 21:59:13

【问题描述】：

当我在子组件中时，我想将整个页面背景（包括app-nav-bar）更改为与默认颜色不同的颜色。

当我移动到不同的组件时，应该返回默认样式。

大家有什么想法吗？

【问题讨论】：

您是否使用 Bool 值来切换该子组件？还是您使用其他方法来激活子组件？

我要使用路由器去子组件

【参考方案1】：

也许你需要Vuetify theme？ 主题可以包含一组颜色

https://vuetifyjs.com/en/customization/theme/

您可以通过以下方式更改黑白主题 this.$vuetify.theme.dark = true/false 在组件中

【讨论】：

但是主题如何改变应用程序的整个背景（包括应用程序导航栏）？它只会改变容器。对吗？

@chaitanyam 这取决于你如何使用主题，你可以使用computed 属性来设置你需要的任何元素的backgroundColor

【参考方案2】：

根据您对我的评论的回答，这可能是您想要做的： 设置 Vuex 存储并在其中存储带有颜色代码的变量。 通过这种方式，您可以从应用程序中的任何位置访问这些颜色。 然后，在您的应用程序中，您可以使用以下命令检查当前路线：

this.$route

然后您可以检查路线是否与您要更改颜色的路线相匹配。 然后将颜色应用到所有元素。

PS。 如果您只想更改 app.vue 中可以找到的元素，则根本不必将变量存储在 store 中，但您只需签入路由器并相应地分配颜色。

希望这对您有所帮助！