プログラミング

Vue.jsでコンポーネントの値をCSSに渡す方法

VueからCSSに値を渡す

 

Vue.jsを使っていて、「propsの値をCSSに渡すにはどうすればいいんだろう...?」という感じで少し悩んだので、コンポーネントの値をCSSに渡す方法を、自身の備忘録目的も含めて解説します。

 

ちなみに、やり方を簡潔にまとめると、

  • computed内にCSSカスタムプロパティ(以下CSS変数)を定義する
  • 定義したCSS変数に、CSS側に渡したいVueコンポーネントの値を指定する
  • styleにバインドする

この3つが、大まかな実装方法です。

 

CSSにVueコンポーネントの値が渡せることで何が嬉しいのかというと、いちいち固定のCSSを書き加えなくても、呼び出し元で指定した値がそのままCSSに反映されるようになるんです。

 

ユウマ
コンポーネント化が捗りますよ...!

 

それでは、さっそく解説していきます!

 

Vue.jsでコンポーネントの値をCSSに渡す方法

 

以下が実際のコードです。

【呼び出し元】

 

【コンポーネント】

 

上記のコードでは、親画面(呼び出し元)で「font-size」の値を渡してあげると、vw値に変換して画面サイズに応じて文字が縮小・拡大するといった処理をしています。

 

 

ユウマ
流れをもう少し詳し見ていきましょう!

 

「:size」の部分でfont-sizeで使用する値をコンポーネントに渡しています。

 

コンポーネント側では、親画面から送られてきた値をpropsで受け取り、その値をcomputed内でCSS変数に保存します。

※CSS変数の宣言は、ハイフン2つで始まるので注意。(このコードのCSS変数は「--font-size」)

ユウマ
ちなみにdefault値の「18」は、呼び出し元から値が送られなかった時に使用される値です。

 

CSS側(styleタグ内)で、定義したCSS変数を使ってfont-sizeの値をvw値に変換しています。

CSS変数を使う時は、var()関数の中で変数名を指定する必要があるので注意。 (このコードでは「var(--font-size)」)

 

v-bind:styleにはcomputedのプロパティを、class属性にはクラス名を付与します。

 

動作画面はこちら

HelloWorld!!

 

最後に

 

今回は、Vue.jsでコンポーネントの値をCSSに渡す方法を解説しました。

 

今回解説したfont-size以外にも、String型で受け取ればどんなスタイルでも適用することができるので、色々試してみてください!

 

-プログラミング

Copyright© ユウマのブログ , 2020 All Rights Reserved.