一個 1 分鐘就學會的 vue 小技巧（真的一看就會）

在使用vue開發(fā)時，經(jīng)常會封裝很多的組件方便復用，那么難免就有寫樣式相關組件，比如需要使用時傳入顏色、高度等樣式參數(shù)。

那么問題來了：我們要怎么在樣式中使用組件中接收的參數(shù)呢？或者說，我們要怎么在樣式中使用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中實現(xiàn)了在樣式里使用js變量的方法：
及通過css定義變量的方式，將變量在行內(nèi)注入，然后在style中使用var()獲取我們在行內(nèi)設置的數(shù)據(jù)即可。

三、最后

以后，在封裝一些需要動態(tài)傳入樣式參數(shù)的ui組件是不是簡便了不少。你學會了么？趕快在項目中嘗試一下吧～～