カスタムディレクティブとは？
自分でvから始まるVue.jsのディレクティブを作る事ができる機能です。Vue.jsの標準のディレクティブではDOM操作等を自分で記述することはほぼなかったのですが、このカスタムディレクティブではガンガン低レベルのDOM操作メソッド等を自分で扱ったりすることになります。
メリット
ソースコードを抽象化して再利用できるようにしたい場合に効果的です。
フック関数
ディレクティブの中には5つのフック関数を配置する事ができます。その中でも重要な関数はbindとupdateです。なぜなら初期化されないディレクティブはないですし、何かデータを変化させるためにディレクティブを用意する必要があるためです。
| 関数名 | 説明 |
|---|---|
| bind | ディレクティブが初めて対象の要素に初めて紐づいた時に呼ばれる。例えば、ディレクティブをタグに記述して初めて呼ばれた際に1度だけ呼ばれます。Vueインスタンスでいうcreatedです。 |
| inserted | 親のVNodeのDOMに実際に挿入された時。Vueインスタンスでいうmountedです。 |
| update | 親のコンポーネントが少しでも更新された場合（子コンポーネントはまだ影響なし） |
| componentUpdate | 子コンポーネントのデータも含めて変更があった場合 |
| unbind | コンポーネントで言うところのdestroy |
書き方
main.jsに下記のように記述します。その中でも必ず記述することになるのはbindとupdateなのでそれ以外は一旦消しておくと良いでしょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Vue.directive("ディレクティブ名", { bind(el, binding, vnode) { }, inserted(el, binding, vnode) { }, update(el, binding, vnode, oldVnode) { }, componentUpdate(el, binding, vnode, oldVnode) { }, unbind(el, binding, vnode) { } }) |
省略記法
下記のように引数にオブジェクトではなく関数を取る記述法にもする事ができこの方がむしろ一般的な書き方です。（関数の引数はelとbinding以外はあまり使わないので省略しています。）
|
1 2 |
Vue.directive("border", function (el, binding) { }) |
el
そのカスタムディレクティブが紐づく要素のことを指しています。例えばdivタグでカスタムディレクティブを使っていた場合はdivタグを示すことになります。
例
例えば、要素にborderをつけるディレクティブを作る場合は下記のようにします。下記の例はJavaScriptでDOMを直接操作しています。
|
1 2 3 |
Vue.directive("border", function (el) { el.style.border = "solid blue 1px"; }) |
下記は呼び出す側です。
|
1 |
<img v-border alt="Vue logo" src="./assets/logo.png"> |
binding
例
DOMに対して枠線の色を設定する場合は下記のように記述します。
|
1 2 3 4 |
Vue.directive("border", function (el, binding) { el.style.border = "solid black 2px"; el.style.borderColor = binding.value; }) |
渡す側は下記のようにします。
|
1 |
<img v-border="'red'" alt="Vue logo" src="./assets/logo.png"> |
複数データを渡す場合は下記のようにします。
|
1 2 3 4 5 |
Vue.directive("border", function (el, binding) { el.style.border = "solid black 2px"; el.style.borderWidth = binding.value.width; el.style.borderColor = binding.value.color; }) |
上記のようにオブジェクトに複数項目を設定すれば複数項目を渡す事が可能です。
|
1 |
<img v-border="{color: 'red',width: '6px'}" alt="Vue logo" src="./assets/logo.png"> |
引数を渡す
|
1 2 3 |
Vue.directive("border", function (el, binding) { console.log(binding.arg) }) |
下記のように「:引数」として渡します。（例ではabcと言う文字を渡しています。）
|
1 |
<img v-border:abc="{color: 'red',width: '6px'}" alt="Vue logo" src="./assets/logo.png"> |
修飾子を使う
任意の修飾子を追加する事ができます。下記の例ではfgcと言う値が修飾子になります。
|
1 |
<img v-border:abc.fgc="{color: 'red',width: '6px'}" alt="Vue logo" src="./assets/logo.png"> |
ディレクティブの処理側では修飾子のチェックをする事ができます。修飾子として指定されていればtrueが返ります。
|
1 2 3 |
Vue.directive("border", function (el, binding) { console.log(binding.modifiers.fgc); }) |
ローカル登録
今まではグローバル登録をして全てのコンポーネントで共通して使えるカスタムディレクティブを登録する方法を記述してきましたが、下記のようにすればそのコンポーネント内のみで使えるローカルのカスタムディレクティブとして使用できるようになります。
|
1 2 3 4 5 6 7 8 9 |
<script> export default { directives: { 関数名(el,binding) { el.style.border = "solid black 2px"; } } } </script> |
ただ、注意点としてはコンポーネントのローカルで使用したからといってthisによりコンポーネントのデータにアクセスすることはできませんので注意です。
この記事へのコメントはありません。