Vue.js での v-on イベントの使用方法の詳細な説明

今回は、Vue.js での v-on イベントの使用について詳しく説明します。Vue.js で v-on イベントを使用する際の 注意事項 について、実際の事例を見てみましょう。

すべての Vue インスタンスはイベント インターフェイスを実装します。つまり、

$on(eventName) を使用してイベントをリッスンします

$emit(eventName) を使用してイベントをトリガーします

Vue のイベント システムは、ブラウザの EventTarget API から分離されています。これらは同様に動作しますが、$on と $emit は addEventListener とdispatchEvent のエイリアスではありません。

さらに、親コンポーネントは、子コンポーネントがトリガーするイベントをリッスンするために子コンポーネントが使用される v-on を直接使用できます。

以下はドキュメントの例です:

2017年4月11日

更新しました

<p id="counter-event-example">
 <p>{{ total }}</p>
 <button-counter v-on:increment="incrementTotal"></button-counter>
 <button-counter v-on:increment="incrementTotal"></button-counter>
</p>
Vue.component('button-counter', {
 template: '<button v-on:click="increment">{{ counter }}</button>',
 data: function () {
  return {
   counter: 0
  }
 },
 methods: {
  increment: function () {
   this.counter += 1
   this.$emit('increment')
  }
 },
})
new Vue({
 el: '#counter-event-example',
 data: {
  total: 0
 },
 methods: {
  incrementTotal: function () {
   this.total += 1
  }
 }
})

ステップ 1:

実際、レンダリング後、ステップ 4 のカスタム ラベルは次のようになります。ステップ 1 同じコードなので、親コンポーネントと子コンポーネント間のイベント バインディングを理解するには、ここから始める必要があります。サブコンポーネントでは、クリック イベント (click) が

関数 increment (つまり、図のステップ 2) にバインドされています。ここでは、サブコンポーネントは、関数 にあるインクリメントをトリガーします。 ステップ 2 とステップ 3: インクリメント関数の実行がトリガーされ、関数を呼び出すステートメントがステップ 2 で実行されます

this.$emit('increment')

ドキュメントを見てみましょう

vm.$emit(event, […args] ): 現在のインスタンスでイベントをトリガーします。追加のパラメータはリスナーのコールバックに渡されます

ここでの意味は何でしょうか？私は自分の言葉でこう言います:

この関数を通じて、親コンポーネントは子コンポーネントがどの関数を呼び出したかを知ることができます。 this.$emit('increment') は、子コンポーネントが親コンポーネントに「こんにちは、お父さん、自分のインクリメント関数を呼び出しました」と伝えるのと似ています。親コンポーネント

ステップ 4:

親コンポーネントで定義されたカスタム タグを振り返ると、

v-on:increment="incrementTotal"

がわかります。 それはどういう意味ですか？わかりやすい英語で説明しましょう

つまり、「子よ、あなたがincrement関数を呼び出したら、私はあなたに応答するためにincrementTotal関数を呼び出します。」

このとき、ステップ 3 を思い出してください。子コンポーネントでは、通知するために Emit を使用しました。したがって、これは、実際には、開発プロセス中に、親コンポーネントと子コンポーネント間の相互応答と情報の転送を形成します。親コンポーネントと子コンポーネントもこのメソッドを使用します。コンポーネントが子コンポーネントに情報を渡す場合、props パラメーターが使用されます。通常、親コンポーネントから渡された情報は子コンポーネント内で直接変更されず、このようなフックを使用して通知します。親コンポーネントを使用して特定のパラメーターを変更します

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

JS匿名関数の使用方法

ライブビデオストリーミング用のffmpegに基づくnodejs

Vue2.0のグローバルスタイル設定の詳細な手順

以上がVue.js での v-on イベントの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。