引数付きのカスタムディレクティブを定義する [Vue.js]

Vue.js The Progressive JavaScript Framework

本ブログでは、以前にVue.jsのカスタムディレクティブについて紹介しました。

カスタムディレクティブを定義する directive [Vue.js]
Vue.jsには、属性の形式でDOMツリー(文書ツリー)を操作する仕組みとしてディレクティブが用意されています。 ディレクティブに...

カスタムディレクティブを自作することで、本来であればコードから直接DOM要素を操作しなければならないような処理をディレクティブとして切り出すことで、ビューとロジックが混在することを防ぐことができます。

Vue.jsにあらかじめ用意されているv-bindディレクティブや、v-onディレクティブでは、ディレクティブの名前の後にコロン(:)区切りで引数を指定することができます。
例えば、v-bindディレクティブでstyle属性を指定する場合なら「v-bind:style」、v-onディレクティブでclickイベントを指定するなら「v-on:click」となります。
このようなディレクティブの引数は、自作のカスタムディレクティブにも組み込むことができます。

今回は、引数付きのディレクティブを定義する方法について紹介します。

カスタムディレクティブの定義

ここでは、ディレクティブの定義についておさらいしておきます。

カスタムディレクティブは、directiveメソッドで以下のように定義できます。

ここでは、要素の背景色を指定する「v-color」ディレクティブを定義しています。

定義したディレクティブは、以下のように利用します。

引数付きのカスタムディレクティブ

以下に引数付きのディレクティブを定義する例を示します。

ここでは、要素の背景色を指定する「v-color」ディレクティブを定義しています。
「v-color」ディレクティブは、引数として「back」「fore」「border」の3種類を受け取ります。
引数に「back」が指定された時は、要素の背景色を設定します。
引数に「fore」が指定された時は、要素の前景色(テキストの色)を設定します。
引数に「border」が指定された時は、要素の罫線色(ボーダーの色)を設定します。

ディレクティブの引数は、bindingオブジェクトのargプロパティで取得することができます。

定義したディレクティブは、HTMLテンプレート側で以下のように利用します。

動的なディレクティブの引数

ディレクティブの引数は、Vue.jsに標準で用意されているディレクティブの引数と同様に、動的にすることができます。
例えば、v-mydirective:[argument]=”value”というディレクティブがある場合、引数「argument」はコンポーネントのVueインスタンスのdataプロパティオプションに定義したプロパティをもとに更新することができます。
動的な引数の対応により、プログラマブルな処理を行うことができます。

ページの固定位置に要素をピン留めするカスタムディレクティブを考えてみましょう。引数の値が縦方向のピクセル位置を更新するカスタムディレクティブを以下のように作成することができます:

ディレクティブの動的引数については、以下の記事を参考にしてください。

ディレクティブ(v-bind, v-on)の動的引数 [Vue.js]
Vue.jsのv-bindディレクティブを使用すると、HTML要素の属性に値をバインドすることができます。 v-bin...

Vue.js 入門 Tips 一覧