VUE3 基本チュートリアル: Vue.js を使用したカスタム イベント

Vue.js は、多くの便利な機能を提供する人気の JavaScript フレームワークであるため、Web アプリケーションを開発する際に非常に役立ちます。 Vue.js のカスタム イベント システムにより柔軟性が高まり、コンポーネント イベントの起動と処理を通じてコードの再利用性が向上します。この記事では、Vue.js でカスタム イベントを使用する方法について説明します。

Vue.js のカスタム イベントの基礎

Vue.js では、v-on ディレクティブを通じて DOM イベントをリッスンできます。たとえば、ボタンのクリック イベントをリッスンする次のコードを作成できます。

<button v-on:click="onClick">Click me!</button>

「onClick」はコンポーネント メソッドであり、ボタンがクリックされたときに呼び出されます。ここで「onClick」が$emitメソッドのキーとなります。 $emit メソッドは、カスタム イベントをトリガーできる Vue.js のメソッドです。 $emit メソッドを使用する場合、その最初のパラメーターはカスタム イベントの名前を指定し、他のパラメーターはリスナーに渡されます。

次は、$emit メソッドを使用してカスタム イベントをトリガーする例です:

// 子组件.vue
<div>
  <button v-on:click="$emit('custom-event', 'some data')">Click me!</button>
</div>

// 父组件.vue
<child-component v-on:custom-event="handleCustomEvent"></child-component>

methods: {
  handleCustomEvent (data) {
    console.log(data) // logs "some data"
  }
}

子コンポーネントでは、ボタンを使用してカスタム イベントをトリガーします。最初のパラメーターは「custom-event」、2 番目のパラメーターはリスナーに渡されるデータです。親コンポーネントでは、v-on ディレクティブを使用して「custom-event」イベントをリッスンし、イベントがトリガーされたときに呼び出される handleCustomEvent 関数にバインドします。 handleCustomEvent は、渡されたデータ パラメーターを受け取り、そのデータをコンソールに出力します。

カスタム イベントを使用してコンポーネント間の通信を完了する

Vue.js のカスタム イベント システムを使用して、コンポーネント間でデータを転送できます。カスタム イベントを使用してコンポーネント間の通信を完了する例を次に示します。

// 子组件A.vue
<template>
  <div>
    <button v-on:click="$emit('update-counter', counter)">Increase counter</button>
  </div>
</template>

<script>
export default {
  data () {
    return { counter: 0 }
  }
}
</script>

// 子组件B.vue
<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <child-component-a v-on:update-counter="updateCounter"></child-component-a>
  </div>
</template>

<script>
import ChildComponentA from './ChildComponentA.vue'

export default {
  components: { ChildComponentA },
  data () {
    return { counter: 0 }
  },
  methods: {
    updateCounter (counter) {
      this.counter = counter
    }
  }
}
</script>

この例には、ChildComponentA と ChildComponentB という 2 つのコンポーネントがあります。 ChildComponentA は、カウンタを増加させるボタン コンポーネントです。ボタンがクリックされると、$emit メソッドを通じてカスタム イベントの更新カウンタをトリガーし、現在のカウンタ値をパラメータとして親コンポーネントに渡します。

ChildComponentB はカウンター コンポーネントであり、ChildComponentA を使用し、update-counter カスタム イベントをリッスンして、それを updateCounter メソッドにバインドします。 updateCounter メソッドは、渡されたカウンター値をコンポーネントの状態変数 counter に設定するため、コンポーネント内の現在の値を表示できます。

概要

Vue.js のカスタム イベントは、コンポーネント間の効率的な通信を実現できる強力な機能です。コンポーネント内でのイベントのトリガーに加えて、Vue.js ではグローバルなイベントのトリガーもサポートされており、コンポーネント内だけでなく、各 Vue.js インスタンスでも $emit メソッドを使用できます。

カスタム イベントを使用する場合は、Vue.js のベスト プラクティスに従う必要があります。これは、言語自体の DOM イベントとの混同を避け、コンポーネントとの直接通信にイベントを使用することです。コンポーネント間通信を実装する場合、コンポーネント間で状態変数を共有せず、代わりにカスタム イベントを使用してデータを渡すことが最善です。

以上がVUE3 基本チュートリアル: Vue.js を使用したカスタム イベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。