Vue.jsを使っていて、「propsの値をCSSに渡すにはどうすればいいんだろう…？」という感じで少し悩んだので、コンポーネントの値をCSSに渡す方法を、自身の備忘録目的も含めて解説します。
ちなみに、やり方を簡潔にまとめると、
- computed内にCSSカスタムプロパティ（以下CSS変数）を定義する
- 定義したCSS変数に、CSS側に渡したいVueコンポーネントの値を指定する
- styleにバインドする
この３つが、大まかな実装方法です。
CSSにVueコンポーネントの値が渡せることで何が嬉しいのかというと、いちいち固定のCSSを書き加えなくても、呼び出し元で指定した値がそのままCSSに反映されるようになるんです。
それでは、さっそく解説していきます。
Vue.jsでコンポーネントの値をCSSに渡す方法
以下が実際のコードです。
<template>
<div id="app">
<!-- 使う値をコンポーネント側に渡す -->
<BaseText
:size="40"
>Hello World!!</BaseText>
</div>
</template>
<script>
import BaseText from './components/BaseText.vue';
export default {
name: 'App',
components: {
BaseText
}
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>呼び出し元
<template>
<!-- 「v-bind:style」でcomputedのプロパティをバインド -->
<!-- class属性に作ったクラス名を指定する -->
<div
class="text"
:style="fontSize"
>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'BaseText',
props: {
size: {
type: Number,
required: false,
default: 18,
}
},
computed: {
// CSS変数を定義して、CSS側に渡したいVueコンポーネントの値を指定する
// ※今回はpropsで受け取った値
fontSize() {
return {
'--font-size' : this.size,
}
},
}
}
</script>
<style scoped>
/* computedで定義したCSS変数を使って、CSSの値を指定する */
.text {
font-size: calc(100vw / 1080 * var(--font-size));
}
</style>コンポーネント
上記のコードでは、親画面（呼び出し元）で「font-size」の値を渡してあげると、vw値に変換して画面サイズに応じて文字が縮小・拡大するといった処理をしています。
ユウマ流れをもう少し詳し見ていきましょう。
「:size」の部分でfont-sizeで使用する値をコンポーネントに渡しています。
<BaseText
:size="40"
>Hello World!!</BaseText>コンポーネント側では、親画面から送られてきた値をpropsで受け取り、その値をcomputed内でCSS変数に保存します。
※CSS変数の宣言は、ハイフン２つで始まるので注意。（このコードのCSS変数は「–font-size」）
props: {
size: {
type: Number,
required: false,
default: 18,
}
},
computed: {
fontSize() {
return {
'--font-size' : this.size,
}
},
}ちなみにdefault値の「18」は、呼び出し元から値が送られなかった時に使用される値です。
CSS側（styleタグ内）で、定義したCSS変数を使ってfont-sizeの値をvw値に変換しています。
CSS変数を使う時は、var()関数の中で変数名を指定する必要があるので注意。 （このコードでは「var(–font-size)」）
<style scoped>
.text {
font-size: calc(100vw / 1080 * var(--font-size));
}
</style>v-bind:styleにはcomputedのプロパティを、class属性にはクラス名を付与します。
<div
class="text"
:style="fontSize"
>
<slot></slot>
</div>
最後に
今回は、Vue.jsでコンポーネントの値をCSSに渡す方法を解説しました。
今回解説したfont-size以外にも、String型で受け取ればどんなスタイルでも適用することができるので、色々試してみてください。
