关于vue.js:vue-封装组件样式小技巧

在应用vue开发时，常常会封装很多的组件不便复用，那么不免就有写款式相干组件，比方须要应用时传入色彩、高度等款式参数。
那么问题来了：咱们要怎么在款式中应用组件中接管的参数呢？或者说，咱们要怎么在款式中应用data中的变量呢？

话不多说 上菜~

<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()获取咱们在行内设置的数据即可。