组件动态样式

子组件

该组件有的props有三个属性，并且样式是用变量绑定的，css引入是通过变量引入的，比变量前面需要加上–两个字符

<template>
    <div class="box" :style="styleStr">子组件的框框</div>
</template>

<script>
    export default {
        name: "ComponentStyle.vue",
        props:{
          background:{
              type:String,
              default:'red',
          },
          height:{
              type: Number,
              default: 200,
          },
            width:{
              type:Number,
                default:200,
            }
        },
        computed:{
          styleStr(){
              return{
                  '--box-height':this.height+'px',
                  '--box-width':this.width+ 'px',
                  '--box-background': this.background
              }
          }
        },
        data(){
            return{

            }
        }
    }
</script>

<style scoped lang="scss">
    .box{
        height: var(--box-height);
        width: var(--box-width);
        background: var(--box-background);
    }
</style>

父组件

<template>
  <div class="about">
    <component-style></component-style>
  </div>
</template>
<script>
  import ComponentStyle from '@/components/ComponentStyle.vue'
  export default{
    components: {ComponentStyle},
    data(){
      return{
      }
    },
    comments:{
      ComponentStyle
    }
  }
</script>

父组件未向子组件传值的时候，子组件默认

传值的代码

<template>
  <div class="about">
    <component-style :background="'green'" :height="500" :width="300"></component-style>
  </div>
</template>
<script>
  import ComponentStyle from '@/components/ComponentStyle.vue'
  export default{
    components: {ComponentStyle},
    data(){
      return{
      }
    },
    comments:{
      ComponentStyle
    }
  }
</script>

样式为