tacamy--blog

JavaScriptを勉強中の人のブログです。

Vue.jsのカスタムディレクティブを付与した要素にDOMイベントのコールバックを指定する

Vue.jsのカスタムディレクティブのフック関数には

  • bind ディレクティブが初めて対象の要素にひも付いた時
  • inserted ひも付いている要素が親 Node に挿入された時
  • update ひも付いた要素を抱合しているコンポーネントの VNode が更新される度
  • componentUpdated 抱合しているコンポーネントの VNode と子コンポーネントの VNode が更新された後
  • unbind ディレクティブがひも付いている要素から取り除かれた時

があるけど、カスタムディレクティブを付与した要素でclickとかのDOMのイベントが発火したときにコールバック関数を指定したい場合はどうするんだろう?って思ったら、

// `v-foo`というグローバルカスタムディレクティブを登録
Vue.directive('foo', {
  bind: (el, binding) => {
    el.addEventListener('click', onClick, false)
  }
})

function onClick() {
  console.log('clicked')
}

みたいに、bindの中でel.addEventListenerを普通に指定すればよいだけだった。

addEventListenerのコールバック関数に引数を渡す

ちなみに、

<button v-foo="value"></button>

こんな感じにカスタムディレクティブを使うときに引数を渡して、その値をDOMイベントで使いたい場合は、addEventListenerのコールバック関数に引数を渡す必要があるから、

Vue.directive('foo', {
  bind: (el, binding) => {
    const {value} = binding
    el.addEventListener('click', () => onClick(value), false)
  }
})

function onClick(value) {
  console.log(value)
}

みたいに、第二引数を無名関数?にしたらできた。まぁこれは、Vue.jsは関係なくてただのJavaScriptの話だけど。

参考 :