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

#.self
#.once
.passive

カスタム イベント ## ＃これまで、ネイティブ イベントを処理する方法について説明してきました。しかし、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");
    });
  }
}

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

以上がvue.jsでのイベントの扱い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。