Vue.js 2.x中基于Prop设置CSS变量并在祖辈组件中使用的问题

嘿，我来帮你捋清楚这个问题～

你当前的做法没生效，核心原因是CSS变量的继承逻辑是从父元素往子元素传递的：你在子组件的<div>上设置了--main-padding-bottom变量，这个变量只能被该<div>的子元素继承使用，而祖辈的<main>是它的上级DOM元素，根本没法获取到这个子元素上的变量——哪怕你的CSS是unscoped的也没用，因为变量的作用域是基于DOM层级的继承关系，和CSS的作用域规则是两回事。

下面给你几个可行的解决方案，你可以根据项目情况选择：

方案1：把CSS变量挂载到全局根元素 #

如果你这个变量不需要做局部隔离，可以直接把它设置在document.documentElement（也就是:root对应的DOM节点）上，这样整个页面的元素都能访问到这个变量：

export default {
  props: ['hasFooter'],
  watch: {
    // 监听hasFooter变化，实时更新变量
    hasFooter(newVal) {
      document.documentElement.style.setProperty('--main-padding-bottom', newVal ? '40px' : '20px');
    }
  },
  mounted() {
    // 组件初始化时先设置一次变量值
    document.documentElement.style.setProperty('--main-padding-bottom', this.hasFooter ? '40px' : '20px');
  }
}

之后你原来的CSS写法就能生效了：

main.v-main {
  padding-bottom: var(--main-padding-bottom);
}

方案2：直接给祖辈<main>元素设置变量 #

如果不想全局污染变量，可以直接找到<main>元素，把变量绑定到它自己身上：

export default {
  props: ['hasFooter'],
  methods: {
    updateMainPadding() {
      const mainEl = document.querySelector('main.v-main');
      if (mainEl) {
        mainEl.style.setProperty('--main-padding-bottom', this.hasFooter ? '40px' : '20px');
      }
    }
  },
  watch: {
    hasFooter() {
      this.updateMainPadding();
    }
  },
  mounted() {
    this.updateMainPadding();
  }
}

这种方式变量只属于<main>元素，不会影响其他地方的样式。

方案3：遵循Vue单向数据流，把状态上移 #

这其实是最符合Vue设计理念的做法：把hasFooter这个状态提到<main>所在的父组件中，直接在父组件里给<main>设置动态样式，子组件只负责接收状态做自己的逻辑：
父组件代码：

<template>
  <main class="v-main" :style="{ paddingBottom: hasFooter ? '40px' : '20px' }">
    <!-- 嵌套你的TouchLayout组件 -->
    <TouchLayout :has-footer="hasFooter" />
  </main>
</template>

<script>
export default {
  data() {
    return {
      hasFooter: true // 这里的状态可以根据业务逻辑动态修改
    }
  }
}
</script>

这种方式不需要折腾CSS变量，数据流清晰，也避免了直接操作DOM的情况。

你可以根据自己的业务场景选择最合适的方案～

备注：内容来源于stack exchange，提问作者Bruno Lamps