$emit を使用して Vue でイベントをトリガーする方法

Vue.js は、インタラクティブで応答性の高い Web アプリケーションを作成できる人気のフロントエンド フレームワークです。 Vue.js には $emit と呼ばれる非常に強力な機能があります。この機能を使用すると、子コンポーネントでイベントをトリガーし、親コンポーネントでそれを処理できます。この記事では、$emit を使用して Vue.js でイベントをトリガーする方法を紹介します。

$Vue.js での送信

Vue.js では、すべてのコンポーネントがイベントの送信側と受信側として機能します。コンポーネントがイベントをトリガーしたい場合、$emit 関数を使用できます。 $emit 関数の構文は次のとおりです。

this.$emit(eventName, payload)

この関数には 2 つのパラメータがあります。 eventName はイベントの名前を示す文字列タイプで、payload はオプションのパラメータであり、任意のタイプのデータを指定できます。コンポーネントがこの関数を呼び出すと、Vue.js はその親コン​​ポーネントにイベントを送信します。親コンポーネントでは、v-on ディレクティブを使用してこのイベントをリッスンできます。

これは、Vue.js で $emit を使用する方法を示す簡単な例です:

<!--Child Component-->
<template>
  <button @click="triggerEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('my-event', 'Hello from child component!')
    }
  }
}
</script>

<!--Parent Component-->
<template>
  <div>
    <child-component @my-event="handleEvent"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    handleEvent(payload) {
      this.message = payload
    }
  }
}
</script>

この例では、ボタンを持つ ChildComponent というコンポーネントを定義します。ボタンがクリックされると、子コンポーネントは $emit 関数を呼び出すことによってカスタム イベント my-event をトリガーし、ペイロードとして「子コンポーネントからこんにちは!」を親コンポーネントに渡します。

親コンポーネントでは、v-on ディレクティブを使用してカスタム イベント my-event をリッスンし、handleEvent メソッドでイベントを処理します。このメソッドでは、イベントのペイロードをメッセージ データ属性に割り当てます。次に、補間式を介してテンプレート内のメッセージを表示します。

概要

Vue.js の $emit 関数を使用すると、子コンポーネントでカスタム イベントをトリガーし、親コンポーネントでイベントを処理できます。 $emit 関数を使用すると、あらゆる種類のデータを渡すことができます。親コンポーネントで、v-on ディレクティブを使用してカスタム イベントをリッスンします。

この記事を通じて、$emit を使用して Vue.js でイベントをトリガーする基本を学習できたことを願っています。

以上が$emit を使用して Vue でイベントをトリガーする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。