Vueのコンポーネント通信技術を詳しく解説

Vue は現在最も人気のあるフロントエンド フレームワークの 1 つで、開発効率を大幅に向上させる非常に強力なコンポーネントベースの開発手法を提供します。 Vue のコンポーネントベース開発では、コンポーネント間の通信処理が非常に重要です。この記事では、Vue のコンポーネント通信テクノロジについて詳しく説明します。

1. 親コンポーネントが子コンポーネントにデータを渡す

Vue では、親コンポーネントは props 属性を使用して子コンポーネントにデータを渡します。親コンポーネントから渡されたデータを、子コンポーネントの props 属性を通じて受け取ります。

親コンポーネント コード:

<template>
  <div>
    <child-component :msg="msg"></child-component>
  </div>
</template>

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

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        msg: 'Hello World!'
      }
    }
  }
</script>

子コンポーネント コード:

<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    props: {
      msg: {
        type: String,
        required: true
      }
    }
  }
</script>

ここで、データは親コンポーネントの子コンポーネント タグを使用して渡され、子コンポーネントは props を使用します。親を受け取る属性 コンポーネントによって渡されたデータにより、データ転送が完了します。

2. サブコンポーネントは親コンポーネントにデータを渡します

サブコンポーネントはカスタム イベントと $emit メソッドを使用して親コンポーネントにデータを渡します。

サブコンポーネント コード:

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('send-message', 'Hello Parent!')
      }
    }
  }
</script>

ここではメソッドを定義し、$emit メソッドを使用してカスタム イベントと渡す必要があるデータを渡します。

親コンポーネント コード:

<template>
  <div>
    <child-component @send-message="receiveMessage"></child-component>
    <div>{{ message }}</div>
  </div>
</template>

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

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

ここでは、親コンポーネントの subcomponent タグを使用して、サブコンポーネントによって送信されたカスタム イベントをリッスンし、receiveMessage メソッドを使用して、サブコンポーネントによって渡されたメッセージを受信します。サブコンポーネント。

3. 兄弟コンポーネント間の通信

兄弟コンポーネント間の通信では、親子関係がないため、親子コンポーネント間の通信のように props や $emit を直接使用することはできません。メソッドと通信するには、Vue の別の通信メソッドであるイベント バスを使用する必要があります。

イベント バスは、兄弟コンポーネント間の通信に使用されるカスタム Vue インスタンスです。 1 つのコンポーネントでは $emit メソッドを使用してカスタム イベントをイベント バスに送信でき、別のコンポーネントでは $on メソッドを通じてイベントをリッスンして受信できます。

イベント バス コード:

import Vue from 'vue'
export default new Vue();

ここでは、イベント バスが別のファイルを通じて作成されます。

コンポーネント A コード:

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
  import EventBus from '../utils/eventBus'

  export default {
    methods: {
      sendMessage() {
        EventBus.$emit('send-message', 'Hello B!')
      }
    }
  }
</script>

ここでコンポーネント A でメッセージを送信するには、EventBus.$emit メソッドを使用してカスタム イベントをイベント バスに送信します。

コンポーネント B コード:

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

<script>
  import EventBus from '../utils/eventBus'

  export default {
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      EventBus.$on('send-message', msg => {
        this.message = msg
      })
    }
  }
</script>

ここでは、コンポーネント B のイベント バスをリッスンし、EventBus.$on メソッドを使用してコンポーネント A によって送信されたメッセージを受信します。

4. クロスレベルコンポーネント通信

クロスレベルコンポーネント通信では、Vue で提供されている Provide/Inject メソッドを使用できます。 Provide/Inject メソッドは、任意のレベルの子孫コンポーネントにデータを渡すことができます。

provide メソッドはデータ オブジェクトを子孫コンポーネントに提供し、inject メソッドはこのデータ オブジェクトを子孫コンポーネントに注入します。

親コンポーネント コード:

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

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

  export default {
    components: {
      ChildComponent
    },
    provide() {
      return {
        message: 'Hello World!'
      }
    }
  }
</script>

ここでは、データ オブジェクト メッセージを内部的に提供するために、親コンポーネントで Provide メソッドが使用されています。

子コンポーネント コード:

<template>
  <div>{{ value }}</div>
</template>

<script>
  export default {
    inject: ['message'],
    computed: {
      value() {
        return this.message
      }
    }
  }
</script>

ここでは、子コンポーネントの inject メソッドを使用して、親コンポーネントによって提供されるデータ オブジェクトを挿入し、このデータ オブジェクトを使用します。

概要

上記は、Vue でのコンポーネント通信の詳細な紹介です。開発プロセス中にコンポーネント間でデータをやり取りする必要がある場合、上記のテクノロジーはこの問題をうまく解決できます。最適な開発効果を達成するには、特定の状況に応じてコンポーネント間の通信を実装する最適な方法を選択する必要があります。

以上がVueのコンポーネント通信技術を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。