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の話だけど。
参考 :