Vue3 でのイベント処理: イベントバインディング、イベント修飾子、カスタムイベント

フロントエンド開発において、イベント処理は、ユーザーインタラクションに応答し、より良いユーザーエクスペリエンスを提供できるようにする重要なテクニックです。人気のある JavaScript フレームワークとして、Vue3 は強力で柔軟なイベント処理メカニズムを提供します。この記事では、イベントバインディング、イベント修飾子、カスタムイベントなど、Vue3 のイベント処理を詳しく紹介します。

イベントバインディング

v-onVue3 では、イベントバインディングのディレクティブまたは短縮表現を使用できます@。以下に例を示します。

<template>
  <div>
    <button @click="onClick">Click me</button>
  </div>
</template>

<script>
export default {
  setup() {
    const onClick = () => {
      console.log('Button clicked')
    }

    return {
      onClick
    }
  }
}
</script>

上記のコードでは、@click命令を通じてonClickメソッドをボタンのクリックイベントにバインドします。ボタンがクリックされると、onClickメソッドが呼び出され、「ボタンがクリックされました」とコンソールに出力されます。このようにして、簡単なイベント処理を実装しました。

クリックイベントに加えて、Vue3 は@input、@submit、@keydownなど、他のさまざまなタイプのイベントもサポートしています。シーンに応じて適切なバインディングイベントタイプを選択できます。

イベント修飾子

イベントをより適切に処理するために、Vue3 はいくつかの便利なイベント修飾子を提供します。イベント修飾子を使用すると、デフォルトのイベント動作を変更したり、イベントトリガー条件を制限したりすることができます。一般的に使用されるイベント修飾子は次のとおりです。

.stop: イベントのバブリングを停止します。つまり、親要素内のイベントの伝播を停止します。
.prevent: フォームの送信やリンクのクリック後のページジャンプなどのイベントをブロックするデフォルトの動作。
.capture: イベントキャプチャモードを使用します。つまり、バブリングモードの内部要素ではなく、外部要素からのイベントをリッスンします。
.self: イベントハンドラーメソッドは、子要素を除き、現在の要素自体でイベントが発生した場合にのみ呼び出されます。
.once: イベント処理メソッドを 1 回だけトリガーしてから、イベントのバインドを解除します。

イベント修飾子の使用方法を示す例を次に示します。

<template>
  <div>
    <button @click.stop="onClick">Click me</button>
    <a href="/" @click.prevent="onLinkClick">Go home</a>
  </div>
</template>

<script>
export default {
  setup() {
    const onClick = () => {
      console.log('Button clicked')
    }

    const onLinkClick = () => {
      console.log('Link clicked')
    }

    return {
      onClick,
      onLinkClick
    }
  }
}
</script>

上記のコードでは、.stopボタンクリックイベントのバブリングを防ぐ修飾子を使用しており、コンソールには「ボタンがクリックされました」のみが出力されます。同時に、.prevent修飾子を使用して、リンククリックイベントのデフォルト動作を防止します。ページはジャンプせず、「リンクがクリックされました」と出力されます。

上記の修飾子に加えて、Vue3 は、.enter(Enter キーによってトリガーされる)、.left(左矢印キーによってトリガーされる) など、他の多くのイベント修飾子も提供します。実際のニーズに応じて、適切なイベント修飾子を選択できます。

カスタムイベント

開発では、コンポーネントまたは特定の機能間の通信を実現するためにカスタムイベントが必要になる場合があります。Vue3 はカスタムイベントのメカニズムを提供し、コンポーネントでカスタムイベントをトリガーしてリッスンできるようにします。

$emitVue3 でカスタムイベントを使用するには、メソッドを使用してイベントを発行し、メソッドを使用してイベントをリッスンできます$on。以下に例を示します。

<template>
  <div>
    <button @click="onClick">Click me</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const onClick = () => {
      count.value++
      if (count.value === 5) {
        // 触发自定义事件
        emit('reached-max', count.value)
      }
    }

    return {
      onClick
    }
  }
}
</script>

上記のコードでは、ボタンがクリックされると、countの値をインクリメントし、という名前のカスタムイベントをemitトリガーし、の値をパラメータとしてイベントハンドラーに渡します。reached-maxcount

親コンポーネントでは、v-on命令または短縮表現を使用して@カスタムイベントをリッスンし、対応する処理関数を実行できます。以下に例を示します。

<template>
  <div>
    <ChildComponent @reached-max="onReachedMax"></ChildComponent>
  </div>
</template>

<script>
export default {
  setup() {
    const onReachedMax = (count) => {
      console.log(`Count reached max: ${count}`)
    }

    return {
      onReachedMax
    }
  }
}
</script>

@reached-max上記のコードでは、サブコンポーネントによって送信されたreached-maxカスタムイベントをリッスンし、対応する情報をイベントハンドラー関数に出力しました。

カスタムイベントの仕組みにより、コンポーネント間の通信や対話を容易に実現でき、コードの再利用性や保守性が向上します。

要約する

Vue3 は、ユーザーインタラクションを簡単に処理できる強力で柔軟なイベント処理メカニズムを提供します。命令を使用し@てイベントをバインドし、イベント修飾子を介してイベントの動作を変更し、カスタムイベントを使用してコンポーネント間の通信と対話を実現できます。Vue3 のイベント処理機能をマスターすると、豊富なインタラクションと高速な応答を備えたフロントエンドアプリケーションをより適切に構築できます。