子组件修改body背景过程记录

原创已于 2022-05-14 18:31:51 修改 · 637 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-05-11 15:29:42 首次发布

本文探讨了在Vue应用中，如何处理登录和注册页面切换时背景样式不一致的问题。作者尝试通过子组件向父组件传递数据来修改body样式，但未成功。最终采用在组件的created和destroyed钩子中直接操作DOM，动态添加和移除样式类。当从login切换到reg时，由于组件销毁顺序导致样式被错误删除。为解决此问题，作者在销毁组件时增加了条件判断，只移除自己添加的样式。该方案提供了一种在Vue中管理全局样式的思路。

目的

在登录页和注册页有背景，在Home页没有

最开始想通过子组件像父组件传递数据，在App.vue中改变body样式，但不知道为什么没有成功，而且麻烦，然后在网上看到帖子，在子组件中获取bodyDom元素改变样式，写完是这个样子

created() {
    document.body.className = "addBg";
},
destroyed() {
    document.body.removeAttribute("class");
},

addBg是给body添加的样式，登录注册页都一样，但是实际运行中发现在登录注册中切换背景会消失，通过打印组件创建销毁过程发现，在login页切换reg页时，reg页先创建，login后销毁，导致reg页给body添加的样式被login销毁时删除了

解决方法时给不同页面的样式区分，并在组件销毁时增加判断，如果现存的样式不是自己创建的样式则不销毁（reg页创建时，如果body存在样式，会被reg增加的样式覆盖）

实际代码

 created() {
    document.body.className = "addBg_login";
  },
  destroyed() {
    if (document.body.getAttribute("class") === "addBg_login") {
      document.body.removeAttribute("class");
    }
  },