Vue.jsのカスタムディレクティブを理解する

前提知識

Vue.jsの基本的な知識

カスタムディレクティブとは？

まずディレクティブとはv-ifとかv-forとかvのついたVue.jsの特有の属性です。
これはVueで予め決まっている物があるのですが、こちらを自分でカスタマイズできると言うことです！！！

早速やってみる

今回はHome.vueのコンポーネントを作る想定で行なっていきます。
Vue　cliを使用しています。

components/Home.vue

<template>
  <p v-color>Home</p>
</template>

こんな感じで今回はv-colorといったカスタムディレクティブを作成していきます。

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
Vue.directive("color", function (el) {
  el.style.backgroundColor = "red"
});

new Vue({
  render: h => h(App),
}).$mount('#app')

説明するとまずはVue.directiveと言うものが使えます。
第一引数にディレクティブ名をつけます。
今回はv-colorなので"color"を名付けています。

第２引数には本来はオブジェクトをとることができます。

main.js

Vue.directive("color", {
  bind() {
    // ディレクティブが初めて対象の要素にひも付いた時、最初のレンダリング
  },
  inserted() {
    //親Nodeに挿入された時componentで言うmounted
  },
  update() {
    // コンポーネントが更新されるタイミングで、子コンポーネントが更新される前
  },
  componentUpdated() { 
    // コンポーネントが更新されるタイミングで、子コンポーネントが更新された後
  },
  unbind() {
    // ディレクティブの要素が削除された時
  },
})

本来であればこんな感じです。
この中でもよく使うのはbindとupdateです。

なのでこの二つは省略記法があります。
それがfunction()です。
Vue.directiveはデフォルトで第二引数にfunctionの関数を設定することで、bindとupdateを同じ処理で実行することができます。

main.js

Vue.directive("color", function (el) {
  el.style.backgroundColor = "red"
});

ここには様々な引数が取れますがまずはelですelementはカスタムディレクティブがつく対象の要素を表します。

つまり今回はp要素です。
つまりp要素のbindとupdate時に背景色を赤にする。といったディレクティブになります。

次にもう一つbindingといった引数をとることができます。
こちらはv-colorからデータを引き継ぐことができます。

Home.vue

<template>
  <p v-color="'blue'">Home</p>
</template>

v-colorの値をblueで設定していきます。
カスタムディレクティブの中は基本的にjavascript式になっているので、こちらはしっかりと文字列に直してあげましょう！

main.js

Vue.directive("color", function (el, binding) {
  el.style.color = "1px solid red"
  el.style.color = binding.value
});

functionはbindingといった引数をとることができbinding.valueで参照するカスタムディレクティブの値のデータを受け取ることができます！！！

複数の引数をとる場合

Home.vue

<template>
  <p v-border="{color: 'red', width: '300px'}">Home</p>
</template>

値をオブジェクトでとります！

main.js

Vue.directive("border", function (el, binding) {
  el.style.border = "1px solid red"
  el.style.color = binding.value.color
  el.style.width = binding.value.width
});

そうするとbinding.value.オブジェクトのキーでデータを受け取ることができます！

引数をとる場合

カスタムディレクティブは引数をとる場合はv-border:引数のような形で引数が取れます。

注意点としてカスタムディレクティブは引数を一つしかとることができません。

Home.vue

<template>
  <p v-border:dotted="{color: 'red', width: '300px'}">Home</p>
</template>

今回はdottedの引数にしていきます。

main.js

Vue.directive("border", function (el, binding) {
  el.style.color = binding.value.color
  el.style.width = binding.value.width
  el.style.borderStyle = binding.arg
});

引数を受け取る場合はbinding.argで受け取れます！！

カスタムディレクティブをローカル登録する

今までやっていたのはグローバル登録で、グローバル上で使えるようになっていました。
実はこれローカル登録もできて、コンポーネント毎に設定することもできます！

Home.vue

<template>
  <p v-border:dotted="{color: 'red', width: '300px'}">Home</p>
</template>

<script>
export default {
  directives: {
    border(el, binding) {
      el.style.color = binding.value.color
      el.style.width = binding.value.width
      el.style.borderStyle = binding.arg
    }
  }
}
</script>

これで先ほどの状態と全く同じ動きをします。
directivesを設定してあとはborderの関数で引数をとるだけですね！！

お疲れさまでした！