本ブログでは、以前にVue.jsのカスタムディレクティブについて紹介しました。
カスタムディレクティブを自作することで、本来であればコードから直接DOM要素を操作しなければならないような処理をディレクティブとして切り出すことで、ビューとロジックが混在することを防ぐことができます。
Vue.jsにあらかじめ用意されているv-bindディレクティブや、v-onディレクティブでは、ディレクティブの名前の後にコロン(:)区切りで引数を指定することができます。
例えば、v-bindディレクティブでstyle属性を指定する場合なら「v-bind:style」、v-onディレクティブでclickイベントを指定するなら「v-on:click」となります。
このようなディレクティブの引数は、自作のカスタムディレクティブにも組み込むことができます。
今回は、引数付きのディレクティブを定義する方法について紹介します。
カスタムディレクティブの定義
ここでは、ディレクティブの定義についておさらいしておきます。
カスタムディレクティブは、directiveメソッドで以下のように定義できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const myDirective = { beforeMount: function(el, binding, vnode, prevVnode) { // 要素の背景色を設定します。 el.style.background = binding.value; } }; // Vueインスタンスを作成します。 const app = Vue.createApp({}) // カスタムディレクティブの「v-color」を登録します。 app.directive('color', myDirective) // Vueインスタンスにルート要素をマウントします。 app.mount('#app') |
ここでは、要素の背景色を指定する「v-color」ディレクティブを定義しています。
定義したディレクティブは、以下のように利用します。
1 2 3 |
<div id="app"> <p v-color="'red'">ディレクティブで背景色を設定</p> </div> |
引数付きのカスタムディレクティブ
以下に引数付きのディレクティブを定義する例を示します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const myDirective = { beforeMount: function(el, binding, vnode, prevVnode) { switch (binding.arg) { case 'back': // 要素の背景色を設定します。 el.style.backgroundColor = binding.value; break; case 'fore': // 要素の前景色を設定します。 el.style.color = binding.value; break; case 'border': // 要素の罫線色を設定します。 el.style.borderStyle = 'solid'; el.style.borderWidth = '1px'; el.style.borderColor = binding.value; break; } } }; // Vueインスタンスを作成します。 const app = Vue.createApp({}) // カスタムディレクティブの「v-color」を登録します。 app.directive('color', myDirective) // Vueインスタンスにルート要素をマウントします。 app.mount('#app') |
ここでは、要素の背景色を指定する「v-color」ディレクティブを定義しています。
「v-color」ディレクティブは、引数として「back」「fore」「border」の3種類を受け取ります。
引数に「back」が指定された時は、要素の背景色を設定します。
引数に「fore」が指定された時は、要素の前景色(テキストの色)を設定します。
引数に「border」が指定された時は、要素の罫線色(ボーダーの色)を設定します。
ディレクティブの引数は、bindingオブジェクトのargプロパティで取得することができます。
定義したディレクティブは、HTMLテンプレート側で以下のように利用します。
1 2 3 4 5 |
<div id="app"> <p v-color:back="'red'">ディレクティブで背景色を設定</p> <p v-color:fore="'red'">ディレクティブで前景色を設定</p> <p v-color:border="'red'">ディレクティブで罫線色を設定</p> </div> |
動的なディレクティブの引数
ディレクティブの引数は、Vue.jsに標準で用意されているディレクティブの引数と同様に、動的にすることができます。
例えば、v-mydirective:[argument]=”value”というディレクティブがある場合、引数「argument」はコンポーネントのVueインスタンスのdataプロパティオプションに定義したプロパティをもとに更新することができます。
動的な引数の対応により、プログラマブルな処理を行うことができます。
ページの固定位置に要素をピン留めするカスタムディレクティブを考えてみましょう。引数の値が縦方向のピクセル位置を更新するカスタムディレクティブを以下のように作成することができます:
ディレクティブの動的引数については、以下の記事を参考にしてください。