Vue コンポーネント間で呼び出しを行う方法

Vue は現代の Web 開発で非常に人気のある JavaScript フレームワークであり、そのコンポーネントは非常に重要な部分です。 Vue ではコンポーネントを再利用できますが、コンポーネント間の通信も開発時によく発生する問題です。この記事では、Vue コンポーネント間の通信の問題を紹介し、Vue コンポーネント間で「呼び出しを行う」方法を詳しく説明します。

1. Vue コンポーネント間の通信

Vue では、コンポーネント間の通信は主に、親子コンポーネント通信と非親子コンポーネント通信の 2 つの方法に分けられます。

1. 親子コンポーネントの通信

Vue コンポーネントでは、親コンポーネントは props を通じて子コンポーネントにデータを渡すことができます。

親コンポーネント テンプレート:

<template>
  <div>
    <child :message="message"></child>
  </div>
</template>

子コンポーネント スクリプト:

<script>
  export default {
    props: ['message']
  }
</script>

親コンポーネントが子コンポーネントにデータを渡す方法は非常に簡単で、props を追加するだけです。属性を子コンポーネントのタグに追加し、サブコンポーネントに必要な転送データを追加するだけです。

親コンポーネントから渡されたデータを受信した後、子コンポーネントはテンプレートでこのデータを使用できます。

<template>
  <div>
    {{message}}
  </div>
</template>

props を介して子コンポーネントにデータを送信することは、最も一般的に使用される親の 1 つです。 -Vue.one の子通信メソッド。実際には、親コンポーネントのメソッドを実行したり、親コンポーネントのデータを操作したりする必要がある場合もあります。この場合、イベント発行を使用して、親コンポーネントと子コンポーネント間の通信を行うことができます。

親コンポーネント:

<template>
  <div>
    <child @sendMsg="updateMessage"></child>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        message: ''
      }
    },
    methods: {
      updateMessage (msg) {
        this.message = msg
      }
    }
  }
</script>

$emit メソッドを使用して子コンポーネントの sendMsg イベントをトリガーします

<script>
  export default {
    methods: {
      sendMessage () {
        this.$emit('sendMsg', 'Hello Vue!')
      }
    }
  }
</script>

2. 非親子コンポーネント通信

In Vueの場合 コンポーネントが親子関係でない場合、コンポーネント間の通信はVueが公式に提供するイベントバスを利用できます。

具体的な実装方法:

新しいeventBus.jsファイルを作成します

import Vue from 'vue'

export const eventBus = new Vue()

通信する必要があるコンポーネントで、eventBus.jsをインポートし、$emitを使用してイベントをトリガーします:

<script>
  import { eventBus } from './eventBus.js'

  export default {
    methods: {
      sendMessage () {
        eventBus.$emit('sendMsg', 'Hello Vue!')
      }
    }
  }
</script>

イベントの受信:

<template>
  <div>
    <h1 id="message">{{ message }}</h1>
  </div>
</template>

<script>
  import { eventBus } from './eventBus.js'

  export default {
    data () {
      return {
        message: ''
      }
    },
    created () {
      eventBus.$on('sendMsg', (msg) => {
        this.message = msg
      })
    }
  }
</script>

この方法では、異なるコンポーネント間の通信が可能ですが、いくつかの欠点があります。アプリケーションが非常に複雑な場合、コンポーネント間の通信リンクを追跡するのが困難です。

2. コンポーネント間の通信方式と選択

アプリケーション開発プロセスでは、開発効率とパフォーマンスを向上させるために、アプリケーションに適した通信方式を選択する必要があります。

1. 親子コンポーネントの通信

は、親子コンポーネントがデータを転送したり、操作を実行したりする必要がある状況に適しています。この方法は比較的シンプルで、保守とデバッグが簡単です。

2. 非親子コンポーネント通信

クロスレベル、兄弟コンポーネント、および他の非親子コンポーネント間で通信が必要な状況に適用されます。イベント バス方式を使用すると、コンポーネント間の通信を簡単に実装できますが、デバッグが困難になったり、複雑さが増したりする可能性があります。

3.Vuex

Vuex は、Vue が公式に提供している状態管理ライブラリで、アプリケーション内の状態 (データや操作を含む) を管理するために使用されます。大量のデータを共有する必要がある大規模プロジェクトに適しています。

Vuex を使用すると、コンポーネント間の通信を Vuex ストアに配置し、必要なコンポーネントがゲッターを通じてストア内のデータを取得したり、アクションを使用してストア内の状態変更をトリガーしたり、ストア内のデータを更新したりできます。ストアにアクセスし、他のコンポーネントに通知します。

まとめ:

Vue 開発では、コンポーネント間の通信の問題がよく発生しますが、親子コンポーネント通信、親子コンポーネント以外の通信、Vuex のステータスを状況に応じて選択できます。実際の状況を管理してください。これらの方法を適切に使用すると、アプリケーション開発の効率とパフォーマンスを向上させることができます。

以上がVue コンポーネント間で呼び出しを行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。