<template>
  <div class="box" :style="styleVar">
  </div>
</template>
<script>
export default {
  props: {
    height: {
      type: Number,
      default: 54,
    },
  },
  computed: {
    styleVar() {
      return {
        '--box-height': this.height + 'px'
      }
    }
  },
}
</script>
<style scoped>
.box {
  height: var(--box-height);
}
</style>

这样我们就在vue中实现了在样式里使用js变量的方法：
及通过css定义变量的方式，将变量在行内注入，然后在style中使用var()获取我们在行内设置的数据即可。

三、最后

以后，在封装一些需要动态传入样式参数的ui组件是不是简便了不少。你学会了么？赶快在项目中尝试一下吧～～