一、內容簡介

在使用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()獲取我們在行內設置的數據即可。

三、最后

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