主要使用到了css3中var

<template >
  <div class="container">
    <p
      class="p1"
      :style="{'--width':width,'--height':height,'--background':bgc,...objStyle}"
    >obj2====={{obj2}}</p>
  </div>
</template>
<script>
import { ref, computed } from "vue";
export default {
  props: {
    width: { type: String, default: "300px" }, // 宽度
    height: { type: String, default: "100px" }, // 高度
    bgc: { type: String, default: "#ccc" } //北京颜色
  },
  setup(p, { emit }) {
    const obj = ref({ obj1: "obj111", obj2: "obj222", obj3: "obj333" });
    let objStyle = computed(() => {
      return { "--fontSize": "22px" };
    });
    return { ...obj.value, objStyle};
  }
};
</script>
<style  scoped>
.p1 {
  width: var(--width);
  height: var(--height);
  background-color: var(--background);
  color: var(--main-bg-color);
  font-size: var(--fontSize);
}
.container {
  color: var(--main-bg-color);
  font-size: var(--main-padding);
}
</style>

1：
通过props接受变量：然后在页面上使用：只有传入style中才能使用，核心代码：

  props: {
    width: { type: String, default: "300px" }, // 宽度
    height: { type: String, default: "100px" }, // 高度
    bgc: { type: String, default: "#ccc" } //北京颜色
  },

 <p class="p1"
    :style="{'--width':width,'--height':height,'--background':bgc,...objStyle}"
    ></p>

CSS:
.p1 {
  width: var(--width);
  height: var(--height);
  background-color: var(--background);
  color: var(--main-bg-color);
}

2：使用computed计算属性，核心代码：
我们可以直接使用computed中返回的对象 --fontSize ==》 22px

let objStyle = computed(() => {
      return { "--fontSize": "22px" };
    });
.p1 {
  font-size: var(--fontSize);
}