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}"
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);
                    主要使用到了css3中var&lt;template &gt;  &lt;div class="container"&gt;    &lt;p      class="p1"      :style="{'--width':width,'--height':height,'--background':bgc,...objStyle}"    &gt;obj2====={{obj2}}&lt;/p&gt;  &lt;/div&gt;&lt;/template&gt;&lt;script&gt
				
关于vue3使用prop传动态参数时父子数据不同步更新问题，​
原文地址：vue3中利用v-model实现父子组件之间的数据同步_vue3父子组件传值实时更新-CSDN博客
使用注意(动态绑定失效的例子)：
父组件中传递的参数在子组件中通过重新创建参数接收传递的参数，再绑定到页面。将导致数据无法实现动态绑定。
				
VUE3.0,DAY45基础案例当APP.vue中的标签被多次使用当别人想用我的组件传数据时，使用props传递的参数类型问题props配置的第二种写法props的第三种写法
基础案例
我们写一个基础的案例便于分析，创建一个vue脚手架，只改动下边几个文件的代码，其他不动。首先是APP.vue中的代码。
<template>
    <School></School>
</template>
用ref给外层容器标记引用信息 <div class="banner_page" ref="bannerPage">
在style中声明变量	.banner_page { --tipsColor: #f08b40; }
在mounted给style中的变量赋值（注意：操作DOM的代码要放在mounted后） this.$refs.bannerPage.style.setProp