vue(或vue3)实现父组件给子组件传递样式变量及在css3内使用变量

在使用vue开发时，经常会封装很多的组件方便复用，那么难免就有写样式相关组件，比如需要使用时传入颜色、高度等样式参数。那么问题来了：我们要如何在子组件使用来自父组件的样式变量参数呢？

父组件页面：

<children colors="red"/>

<script>
import { defineComponent } from 'vue';
import children from './children/index.vue'
export default defineComponent({
  name: 'ElementuiTest1',
  components: {
    children
  },

子组件页面：

<template>
  <div>
     <div class="style1" :style="styleVar">我是子div</div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'children',
  props: {
    colors: {
      type: String,
      default: '',
    },
  },
  computed: {
    styleVar() {
      return {
        // '--box-height': this.height + 'px'
        '--color1': this.colors
      }
    }
  },
});
</script>

<style>
  :root {
    /* 声明了一个变量--fontSize_test1 */
    --fontSize_test1: 25px;  
  }
  .style1 {
    width:500px;
    height:200px;
    border: 1px solid #000;
  }
  .style1 {
    /* 该color1来自父组件的prop */
    color: var(--color1); 
    font-size: var(--fontSize_test1)
  }
</style>

效果图：

---

CSS var() 函数

定义与用法
var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
支持版本：CSS3

CSS 语法
var(custom-property-name, value)

值	描述
custom-property-name	必需。自定义属性的名称，必需以 – 开头。
value	可选。备用值，在属性不存在的时候使用。

:root

:root是一个伪类，表示文档根元素，非IE及ie8及以上浏览器都支持，在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用