Vue修改子组件使用的:root CSS变量时报错：TypeError: Cannot read properties of undefined (reading 'style')

错误原因 #

1. 未正确获取:root元素：你在created钩子中直接使用this.root，但组件实例中从未定义或初始化这个变量，导致读取style属性时触发undefined错误。:root对应HTML文档的根元素，需通过document.documentElement获取。
2. 模板语法冗余：Vue模板中引用data属性无需加this.，:value="this.text"可简化为:value="text"。

修复后的代码（原思路） #

App.vue 修改部分 #

<template>
  <div>
    <Circle :value="text" />
  </div>
</template>

<script>
import Circle from "./Circle.vue";

export default {
  name: "App",
  components: {
    Circle,
  },
  data() {
    return {
      text: "a",
    };
  },
  mounted() { // 推荐用mounted，DOM挂载完成后执行更稳妥
    if (this.text.length > 1) {
      const root = document.documentElement;
      root.style.setProperty("--circle-background-color", "blue");
      root.style.setProperty("--circle-width", "2vw");
      root.style.setProperty("--circle-height", "2vw");
    }
  },
};
</script>

实现方式可行性 #

直接修改:root CSS变量的方式技术上可行，但不符合Vue响应式设计思想。这种直接操作DOM的方式，当text后续动态变化时无法自动同步样式，需手动监听数据变更再执行DOM操作，维护成本较高。

更推荐的Vue响应式实现 #

利用计算属性和动态样式绑定，完全通过响应式数据控制样式，无需操作DOM：

Circle.vue 修改后 #

<template>
  <div class="circle" :style="dynamicStyle">
    <span>{{ value }}</span>
  </div>
</template>

<script>
export default {
  name: "Circle",
  props: {
    value: String,
  },
  computed: {
    dynamicStyle() {
      const isLongText = this.value.length > 1;
      return {
        backgroundColor: isLongText ? "blue" : "red",
        width: isLongText ? "2vw" : "4vw",
        height: isLongText ? "2vw" : "4vw",
      };
    },
  },
};
</script>

<style>
.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20em;
}
</style>

App.vue 简化后 #

<template>
  <div>
    <Circle :value="text" />
  </div>
</template>

<script>
import Circle from "./Circle.vue";

export default {
  name: "App",
  components: {
    Circle,
  },
  data() {
    return {
      text: "a",
    };
  },
};
</script>

这种方式的优势：

• 数据与样式自动同步，text动态变化时样式实时更新
• 代码符合Vue组件化规范，易于维护和扩展

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