如何在Vue路由子组件中单独修改父组件Footer的CSS样式？

我想在RouterView内的Login.vue中修改父组件里ToFooter的样式，试过::v-deep深度选择器和导入方法都没成功，有没有其他解决办法？

父组件模板代码 #

<template>
  <ToHeader />
  <RouterView />
  <ToFooter />
</template>

Footer.vue代码 #

<template>
  <div class="footer">
    <div class="footer_wrap">
      <h2 class="logo">
        Logo
      </h2>
    </div>
  </div>
</template>
<style>
.footer {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  background: #3d3936;
  position: absolute;
  bottom: 0;
}
</style>

Login.vue代码 #

<template>
  <div class="login_box"></div>
</template>
<style>
.login_box {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -70%);
  left: 50%;
}
::v-deep .footer {
  display: none;
}
</style>

子组件无法通过CSS深度选择器直接修改父组件中的同级元素（ToFooter与RouterView是同级关系，并非子组件的后代节点），因此需要通过状态控制类的方式实现样式修改，以下是三种可行方案：

方案一：用Pinia/Vuex管理Footer状态 #

通过状态管理库统一控制Footer的显示/隐藏状态，父组件根据状态绑定动态样式。

1. 创建状态管理文件（以Pinia为例）

// stores/footer.js
import { defineStore } from 'pinia'

export const useFooterStore = defineStore('footer', {
  state: () => ({
    isHidden: false
  }),
  actions: {
    setHidden(status) {
      this.isHidden = status
    }
  }
})

2. 父组件中绑定状态

<template>
  <ToHeader />
  <RouterView />
  <ToFooter :class="{ 'footer-hidden': footerStore.isHidden }" />
</template>
<script setup>
import { useFooterStore } from '@/stores/footer'
const footerStore = useFooterStore()
</script>
<style scoped>
.footer-hidden {
  display: none !important;
}
</style>

3. Login.vue中更新状态

<template>
  <div class="login_box"></div>
</template>
<script setup>
import { useFooterStore } from '@/stores/footer'
import { onMounted, onUnmounted } from 'vue'

const footerStore = useFooterStore()

onMounted(() => {
  footerStore.setHidden(true)
})

onUnmounted(() => {
  footerStore.setHidden(false)
})
</script>
<style>
.login_box {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -70%);
  left: 50%;
}
</style>

方案二：通过路由元信息控制 #

在路由配置中给Login页面添加meta标记，父组件监听路由变化，根据标记调整Footer样式。

1. 配置路由元信息

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login.vue'

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: { hideFooter: true }
  }
  // 其他路由配置...
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2. 父组件监听路由并绑定样式

<template>
  <ToHeader />
  <RouterView />
  <ToFooter :class="{ 'footer-hidden': isFooterHidden }" />
</template>
<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()
const isFooterHidden = computed(() => route.meta.hideFooter || false)
</script>
<style scoped>
.footer-hidden {
  display: none !important;
}
</style>

方案三：通过自定义事件传递状态 #

子组件触发自定义事件，父组件监听事件后修改Footer的样式状态。

1. 父组件监听事件

<template>
  <ToHeader />
  <RouterView @toggle-footer="toggleFooter" />
  <ToFooter :class="{ 'footer-hidden': isFooterHidden }" />
</template>
<script setup>
import { ref } from 'vue'

const isFooterHidden = ref(false)

const toggleFooter = (status) => {
  isFooterHidden.value = status
}
</script>
<style scoped>
.footer-hidden {
  display: none !important;
}
</style>

2. Login.vue中触发事件

<template>
  <div class="login_box"></div>
</template>
<script setup>
import { getCurrentInstance, onMounted, onUnmounted } from 'vue'

const instance = getCurrentInstance()

onMounted(() => {
  instance?.emit('toggle-footer', true)
})

onUnmounted(() => {
  instance?.emit('toggle-footer', false)
})
</script>
<style>
.login_box {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -70%);
  left: 50%;
}
</style>

内容的提问来源于stack exchange，提问作者bxeom