Vue ドキュメントの値転送関数の手順の詳細な説明

Vue.js は人気のある JavaScript フレームワークであり、その利点の 1 つは強力なデータ バインディング機能です。 Vue.js では、データはコンポーネントを介して渡されます。異なるコンポーネント間でデータを渡すために、Vue.js は $emit や $on などの値を渡す関数をいくつか提供しています。この記事では、これらの関数を使用して値の転送を実装する方法について詳しく説明します。

1. コンポーネント通信の基本概念を理解する

Vue.js で開発する場合、通常は複数のコンポーネントを使用して連携して完全なアプリケーションを構築する必要があります。したがって、コンポーネント間の通信は非常に重要であり、さまざまな機能や相互作用の実装に役立ちます。 Vue.js では、コンポーネント間で通信する方法が 2 つあります。

• #親コンポーネントと子コンポーネント間の通信
• #兄弟コンポーネント間の通信

#通信する場合親コンポーネントと子コンポーネントの間では、props 関数と $emit 関数を使用できます。兄弟コンポーネント間で通信する場合、共通の親コンポーネントを利用して通信を実現できます。

$emit を使用して親コンポーネントと子コンポーネント間の通信を実装する

$emit() は Vue.js の非常に重要な値転送関数であり、親コンポーネントに使用されます。と子コンポーネント間の通信。この関数の機能は、子コンポーネントから親コンポーネントにカスタム イベントを渡すことであり、いくつかのパラメーターを渡すことができます。

$emit() を使用して親コンポーネントと子コンポーネント間の通信を実装する手順は次のとおりです。

ステップ 1: 子コンポーネントを定義し、$emit() 関数を使用して子コンポーネントをトリガーします。コンポーネント内のイベント。

<template>
  <div>
    <button @click="passData">传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    passData() {
      this.$emit('get-data', 'Hello Vue')
    }
  }
}
</script>

上記のコードでは、サブコンポーネントを定義し、その中にボタンを定義します。ボタンがクリックされると、passData メソッドがトリガーされます。このメソッドは、$emit() 関数を使用して、get という呼び出しをトリガーします。 -data イベントであり、文字列パラメーター Hello Vue を運びます。

ステップ 2: 親コンポーネントで v-on ディレクティブを使用して、子コンポーネントによってトリガーされたイベントをリッスンし、子コンポーネントによって渡されたパラメーターを受け取るハンドラー関数を定義します。

<template>
  <div>
    <child-component @get-data="getData"></child-component>
    <p>接收到子组件传递的数据：{{ data }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent'
export default {
  components: { ChildComponent },
  data() {
    return {
      data: ''
    }
  },
  methods: {
    getData(data) {
      this.data = data
    }
  }
}
</script>

上記のコードでは、v-on 命令を使用して get-data という名前のイベントをリッスンします。サブコンポーネントがイベントをトリガーすると、getData という名前のメソッドが呼び出され、サブコンポーネントはパラメータになります。渡されたものはメソッドに渡されます。このメソッドでは、子コンポーネントから渡されたデータを親コンポーネントに表示するために、パラメーターを data 属性に割り当てます。

$on を使用して兄弟コンポーネント間の通信を実装する

$on() は、Vue.js のもう 1 つの重要な値転送関数であり、兄弟コンポーネント間の通信に使用されます。 。この関数の機能は、子コンポーネント内のカスタム イベントをリッスンし、そのイベントに応答することです。

$on() を使用して兄弟コンポーネント間の通信を実装する手順は次のとおりです。

ステップ 1: 共通の親コンポーネントを定義します。

<template>
  <div>
    <child-component></child-component>
    <another-child-component></another-child-component>
  </div>
</template>

上記のコードでは、2 つの子コンポーネントを含む親コンポーネントを定義します。

ステップ 2: 子コンポーネントで $on() 関数を使用して、カスタム イベントをリッスンします。

<script>
export default {
  created() {
    this.$root.$on('trigger-event', this.handleEvent)
  },
  methods: {
    handleEvent() {
      console.log('Hello Vue!')
    }
  },
  destroyed() {
    this.$root.$off('trigger-event', this.handleEvent)
  }
}
</script>

上記のコードでは、サブコンポーネントの作成時に、作成されたフック関数を使用して、trigger-event という名前のイベントのリッスンを開始します。イベントがリッスンされると、イベントの処理に使用される handleEvent という名前のメソッドが呼び出されます。また、メモリ リークを避けるために子コンポーネントが破棄されたときに、破棄されたフック関数を使用してイベント リスナーを削除します。

ステップ 3: 別の子コンポーネントで $emit() 関数を使用して、イベントをトリガーします。

<script>
export default {
  methods: {
    triggerEvent() {
      this.$root.$emit('trigger-event')
    }
  }
}
</script>

上記のコードでは、サブコンポーネントを定義し、その中にボタンを定義します。ユーザーがボタンをクリックすると、triggerEvent メソッドが呼び出され、$emit() 関数を使用して、trigger-event という名前のイベントがトリガーされます。

概要

Vue.js では、$emit 関数と $on 関数を使用することで、親子コンポーネントおよび兄弟コンポーネント間の値の転送を実現できます。まず、サブコンポーネントを定義し、その中で $emit 関数を使用してカスタム イベントをトリガーする必要があります。次に、親コンポーネントで v-on ディレクティブを使用してイベントをリッスンし、ハンドラー関数で子コンポーネントによって渡されたパラメーターを処理する必要があります。兄弟コンポーネント間の通信では、$on 関数を使用して共通の親コンポーネントでカスタム イベントをリッスンし、$emit 関数を使用して別の子コンポーネントでイベントをトリガーする必要があります。これらの値転送関数は Vue.js の非常に重要な部分であり、これを習得することでコンポーネント間でデータをより適切に転送できるようになります。

以上がVue ドキュメントの値転送関数の手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。