vue.jsでのイベントの扱い方を詳しく解説-Vue.js-php.cn

vue.jsでのイベントの扱い方を詳しく解説

青灯夜游

リリース： 2020-10-27 17:52:35

転載

2574 人が閲覧しました

次のvue.jsチュートリアルでは、vue.jsを使用してイベントを処理する方法を紹介します。

vue.jsでのイベントの扱い方を詳しく解説

Vue を使用して動的な Web サイトを構築する場合、イベントに応答することが必要になる可能性が高くなります。

たとえば、ユーザーがボタンをクリックしたり、フォームを送信したり、あるいは単にマウスを動かしたりした場合に、Vue Web サイトが特定の方法で応答するようにしたい場合があります。

Vue を使用したイベントの処理

v-on ディレクティブを関連する DOM 要素に追加することで、イベントをインターセプトできます。。ボタン要素のクリックを処理したいとします。以下を Vue テンプレートに追加できます:

<button v-on:click="clickHandler"></button>

ログイン後にコピー

ディレクティブにパラメータ v-onparameter を追加したことに注意してください。は、処理するイベントの名前になります (この場合はクリック)。

次に、式をディレクティブにバインドします。ディレクティブは、通常、イベントを処理するために使用するメソッドです。この場合、これを clickHandler と呼びます。

ヒント: v-on ディレクティブには便利な短縮形 @ があり、v-on::<button @click="clickHandler">< の代わりに使用できます。 /ボタン>。

#処理できるイベントタイプ

クリック以外に処理できるものDOM イベントを処理できるか?

Vue は、次のようなあらゆる種類の Web またはモバイルネイティブイベント (後で説明するカスタムイベントも同様) を処理できます。

submit
keyup
drag
scroll

最も一般的な

DOM イベントのリスト

イベント処理メソッド

メソッドをイベント処理ディレクティブにバインドすると、Run できるようになります。いくつかのカスタムコード。

この例では、単純にしてコンソールにメッセージを記録するだけですが、別の要素の表示/非表示、カウンタの増加など、さらに興味深いことを実行することもできます。

<div id="app">
  <button v-on:click="clickHanlder"></button>
</div>

ログイン後にコピー

new Vue({
  el: "#app",
  methods: {
    clickHandler () {
      console.log("You clicked the button!");
    }
  }
})

ログイン後にコピー

イベントオブジェクト

イベントオブジェクトはイベントハンドラーに渡され、イベントへの応答方法の可能性がさらに広がります。このオブジェクトには、イベントの発生元の要素への参照 (event.target)、イベントの発生時刻 (event.timeStamp) など、多くの便利なプロパティとメソッドが含まれています。

clickHandler (event) {
  console.log(`The button was clicked at ${event.timeStamp}.`);
}

ログイン後にコピー

このオブジェクトは Vue ではなくネイティブ Web API によって提供されるため、純粋な JavaScript で見つかるオブジェクトと同じになることに注意してください。便宜上、

イベントインターフェイスのリファレンスを以下に示します。

イベント修飾子

JavaScript アプリケーションの一般的なパターンは、ネイティブ機能を使用せずにフォームの送信を手動で処理することです。これを行うには、フォーム処理コードを実行する前に、Submit イベントのPreventDefault ネイティブメソッドを使用する必要があります。そうしないと、ページが完了する前にリダイレクトされてしまいます。

formHandler (event) {
  event.preventDefault();
  // form handling logic
}

ログイン後にコピー

Vue は、これをハンドラーで手動で行うのではなく、テンプレートから直接行うためのイベント修飾子を提供します。修飾子はディレクティブの後に「.」が追加されることに注意してください:

<form @submit.prevent="formHandler"></form>

ログイン後にコピー

Vue は、一般的なイベント処理シナリオで役立ついくつかの異なるイベント修飾子を提供します:

.stop
.prevent
.capture

カスタムイベント ## ＃これまで、ネイティブイベントを処理する方法について説明してきました。しかし、Vue はコンポーネントベースのフレームワークなので、コンポーネントに独自のイベントを発行させることはできるでしょうか?

はい、これは非常に便利です。子コンポーネントから親コンポーネントにデータを送信したいとします。小道具データは親から子にのみ渡され、それ以外の場合には渡されないため、ここでは小道具を使用できません。

ParentComponent
 |
 | (data travels down via props, never up)  
 v 
ChildComponent

ログイン後にコピー

解決策は、子コンポーネントにイベントを発行させ、親コンポーネントにイベントをリッスンさせることです。

これを行うには、イベントを発行するときに子コンポーネントから this.$emit("my-event") を呼び出します。たとえば、閉じられたことを親 MainPage に通知する必要があるコンポーネント DialogComponent があるとします。

export default {
  methods: {
    onClose() {
      this.$emit("dialog-closed");
    }
  }
};

ログイン後にコピー

これにより、親コンポーネントはローカルイベントとまったく同じようにカスタムイベントを処理できるようになります。

<div>
  <dialog-component @dialog-closed="eventHandler" />
</div>

ログイン後にコピー

カスタムイベントでデータを送信することもでき、そのデータは処理メソッドを通じて受信できます。

onClose() {
  this.$emit("dialog-closed", { time: Date.now() });
}

ログイン後にコピー

eventHandler (event, { time }) {
  console.log(`Dialog was closed at ${time}`);
}

ログイン後にコピー

ヒント: カスタムイベントにはケバブケース名を使用してください。 HTML では大文字と小文字が区別されないため、myEvent などのキャメルケースのイベント名は、myevent がテンプレート内にあるため混乱を招く可能性があります。したがって、混乱を避けるために kebab-case my-event を使用することをお勧めします。

活动巴士

如上所述，子组件可以将事件发送到父组件。但是，如果您希望组件将事件发送到层次结构中的任何其他组件怎么办？例如，同级，祖父母等。

为此，我们可以使用一种称为事件总线的模式。在这里，我们创建了一个单独的Vue实例，以将事件传输到导入该事件的任何组件。

首先，在新的模块文件中创建并导出Vue实例：

import Vue from "vue";
export default new Vue();

ログイン後にコピー

接下来，将总线导入到您要发出事件的组件中。您可以使用$emit总线Vue实例的方法。

import eventBus from "./eventBus";

export default {
  ...
  methods: {
    myMethod () {
      eventBus.$emit("my-event")
    }
  }
}

ログイン後にコピー

最后，将总线导入到您想听事件的组件中。然后，您应该在代码中的某个位置设置侦听器。我建议您使用生命周期挂钩，就像created您可以在此处访问组件实例一样。

这是通过$on总线方法完成的，该方法带有两个参数-您要监听的事件和一个回调。

import eventBus from "./eventBus";

export default {
  ...
  created () {
    eventBus.$on("my-event", () => {
      console.log("my-event called on global event bus");
    });
  }
}

ログイン後にコピー