Vue.js コンポーネントの v-on はカスタムイベントをバインドします-jsチュートリアル-php.cn

Vue.js コンポーネントの v-on はカスタムイベントをバインドします

小云云

リリース： 2018-01-18 13:16:09

オリジナル

1869 人が閲覧しました

この記事では主に、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(&#39;button-counter&#39;, {
 template: &#39;<button v-on:click="increment">{{ counter }}</button>&#39;,
 data: function () {
  return {
   counter: 0
  }
 },
 methods: {
  increment: function () {
   this.counter += 1
   this.$emit(&#39;increment&#39;)
  }
 },
})
new Vue({
 el: &#39;#counter-event-example&#39;,
 data: {
  total: 0
 },
 methods: {
  incrementTotal: function () {
   this.total += 1
  }
 }
})

ログイン後にコピー

この例に従って、私は以前の間違った考えを理解し、更新することについて話します

まず描く手順に従ってください

ステップ 1:

実際、ステップ 4 のカスタムタグは、レンダリング後にステップ 1 と同じコードになるため、ここからイベントを理解する必要があります。親コンポーネントと子コンポーネント間のバインディング。サブコンポーネントでは、クリックイベント (クリック) が関数のインクリメント (つまり、図のステップ 2) にバインドされています。ここで理解するのは簡単です。つまり、サブコンポーネントのボタンをクリックすると、にあるインクリメント関数がトリガーされます。サブコンポーネント

ステップ 2 とステップ 3:

インクリメント関数の実行がトリガーされます。ステップ 2 では、関数を呼び出すステートメントが実行されます

this.$emit(&#39;increment&#39;)

ログイン後にコピー

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

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

これはどういう意味ですか?私自身の言葉によると、次のように言われます:

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

ステップ 4:

親コンポーネントで定義されたカスタムタグを振り返ると、次のことがわかります

v-on:increment="incrementTotal"

ログイン後にコピー

それは何を意味しますか?現地語で説明しましょう

これは、「子よ、あなたがincrement関数を呼び出すと、私はあなたに応答するためにincrementTotal関数を呼び出します」を意味します

この時点で、ステップ3を思い出し、サブコンポーネントでemitを使用しました。実際、開発プロセス中、親コンポーネントが子コンポーネントに情報を送信する際にも、このメソッドが使用されます。通常、親コンポーネントによって渡される情報は子コンポーネントで直接変更されませんが、このようなフックは、親コンポーネントに特定のパラメーターを変更するように通知するために使用されます