ブロック要素に内容を表示するだけの簡単なコンポーネントを作ったとします。 この要素幅や背景色を属性で指定したい場合、CSS変数を使うと以下のように実装できます。 <template> <div class="box" :style="styles"> <!-- computedなstylesプロパティをstyleにバインド--> <div class="message"> <slot></slot> </div> </div> </template> <script> export default { name: 'box', props: { color: {}, width: {} }, computed: { // バインドするスタイルを生成 styles () { return { '--color': this.color, '--width': this.width } } }