Vue3 Vue イベント処理ガイド

1. 基本的なイベント処理

v-on指令(略して@ ) を使用すると、 DOMイベントをリッスンし、ハンドラーメソッドまたはインラインJavascriptを実行できます。

// v-on ディレクティブ <div v-on:click='handleClick' />

//または

<div @click='handleClick' />

2. 親コンポーネントにカスタムイベントを送信する

どの Web フレームワークでも、子コンポーネントが親コンポーネントにイベントを発行できるようにするのが一般的な使用例です。これは双方向データバインディングの原則でもあります。

一般的な例としてはinputコンポーネントから親フォームにデータを送信することが挙げられます。

Options APIを使用しているか、 Composition API使用しているかに応じて、イベントを発行するための構文が異なります。

Options APIでは、以下に示すように、単にthis.$emit(eventName, payload ) を呼び出すことができます。

エクスポートデフォルト{
  メソッド: {
    ハンドルアップデート: () => {
      this.$emit('update', 'Hello World')
    }
  }
}

ただし、 Composition API使用方法は異なります。 Vue3が提供するsetupメソッドで、 emitメソッドを使用する必要があります。

contextオブジェクトをインポートする限り、 Options APIと同じ引数を使用して emitting を呼び出すことができます。

エクスポートデフォルト{
  セットアップ（プロパティ、コンテキスト）{
    定数handleUpdate = () => {
      context.emit('更新', 'Hello World')
    }

    戻り値: {handleUpdate}
  } 
}

もちろん、私は自分のプロジェクトでデコンストラクションを頻繁に使用します。

エクスポートデフォルト{
  セットアップ（props、{emit}）{
    定数handleUpdate = () => {
      出力('更新', 'Hello World')
    }

    戻り値: {handleUpdate}
  } 
}

完璧！

Optionsを使用する場合でもComposition API使用する場合でも、親グループがリッスンする方法は同じです。

<HelloWorld @update='入力更新されました'/>

まず、テンプレート内の$ event訪問傳遞できます。

コンポーネントのemitメソッドに渡された値がある場合、それをインラインで使用するかメソッドを使用するかに応じて、2 つの異なる方法でキャプチャできます。

1 つ目は、テンプレートで$eventを使用して渡された値にアクセスすることです。

<HelloWorld @update='inputUpdated($event)'/>

2 番目の方法は、イベントを処理するメソッドを使用することです。渡された値は、最初のパラメーターとして自動的にメソッドに渡されます。

<HelloWorld @update='入力更新されました'/>

// ...

メソッド: {
    入力更新: (値) => {
      console.log(value) // これも動作します
    }
}

マウス修飾子

以下は、v-on ディレクティブでキャプチャできる主な DOM マウスイベントのリストです。

<div 
  @mousedown='handleEvent'
  @mouseup='handleEvent'
  @click='handleEvent'
  @dblclick='イベント処理'
  @mousemove='handleEvent'
  @mouseover='handleEvent'
  @mousewheel='handleEvent'
  @mouseout='handleEvent'
>
私と交流しましょう！
</div>

クリックイベントの場合、マウスイベント修飾子を追加して、どのマウスボタンがイベントをトリガーするかを制限することもできます。 left，right 、 middle 3つがあります。

<!-- これはマウスの左ボタンのみをトリガーします-->
<div @mousedown.left='handleLeftClick'> 左 </div>

4. キーボード修飾子

リッスンできる DOM キーボードイベントは 3 つあります。

<入力
   タイプ='テキスト'
   placeholder='何か入力してください'
   @keypress='ハンドルキーが押された'
   @keydown='handleKeyDown'
   @keyup='handleKeyUp'
/>

通常、特定のキーでこれらのイベントを検出する必要があり、これを行うには 2 つの方法があります。

keycodes
Vue にはいくつかのキーのエイリアスがあります ( enter 、 tab 、 delete 、 esc 、 space 、 up 、 down 、 left 、 right )

<!-- Enter キーが離されたときもトリガーします -->
<入力
   タイプ='テキスト'
   placeholder='何か入力してください'
   @keyup.enter='ハンドルEnter'
/>

<!-- または -->
<入力
   タイプ='テキスト'
   placeholder='何か入力してください'
   @keyup.13='ハンドルEnter'
/>

5. システム修飾子

プロジェクトによっては、ユーザーが修飾キーを押した場合にのみイベントをトリガーしたい場合があります。修飾キーは Command キーや Shift キーのようなものです。

Vue には4 つのシステム修飾子があります。

shift
alt
ctrl
meta ( macではCMD 、WindowsではWindows Windows鍵)

これは、 Vueアプリケーションでカスタムキーボードショートカットなどの機能を作成する場合に便利です。

<!-- カスタム ショートカット、Yang は Shift + 8 を使用してリストを作成します -->
<入力
   タイプ='テキスト'
   placeholder='何か入力してください'
   @keyup.shift.56='リストを作成'
/>

Vueドキュメントによると、指定したキーが押され、他のキーが押されていない場合にのみイベントがトリガーされるようにするexact修飾子もあります。

<!-- カスタム ショートカット。Shift + 8 を押すとリストが作成されます -->
<入力
   タイプ='テキスト'
   placeholder='何か入力してください'
   @keyup.shift.56.exact='createList'
/>

6. イベント修飾子

すべてのDOMイベントと同様に、いくつかの修飾子を使用して動作方法を変更できます。 Vueは、伝播を停止し、デフォルトのアクションを防止するための 2 つの組み込みDOMイベント修飾子があります。

<!-- デフォルトの動作を防止する -->
<フォーム@submit.prevent>

<!-- バブルを停止 -->
<フォーム @submit.stop='submitForm'>

<!-- デフォルトの動作とバブリングを防ぐ -->
<フォーム @submit.stop.prevent='送信フォーム'>

<!-- イベントが複数回トリガーされるのを防ぐ -->
<div @close.once='handleClose'>

コードをデプロイした後で、どのようなバグが存在するかをリアルタイムで知る方法はありません。後からこれらのバグを解決するために、ログのデバッグに多くの時間を費やしていました。ここで、便利なバグ監視ツールである Fundebug をお勧めしたいと思います。

これで、Vue3 の Vue イベント処理ガイドに関するこの記事は終了です。Vue イベント処理ガイドの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: