Vue コンポーネント間で通信する 6 つの方法

Vue は、シングルページ アプリケーションを構築するための人気のある JavaScript フレームワークです。 Vue では、コンポーネントはアプリケーションを構築するための基本単位であり、データの表示と処理に使用される再利用可能なコード ブロックです。コンポーネント通信は、コンポーネント間のデータ転送と対話のための中心的なメカニズムの 1 つです。この記事では、コンポーネントが通信する 6 つの方法について説明します。

1. プロップとイベント

プロップとイベントは、Vue の最も基本的なコンポーネント通信メソッドです。親コンポーネントは、props を通じて子コンポーネントにデータを渡します。子コンポーネントは、イベント コンストラクターを通じて親コンポーネントにデータを送信します。この通信方式は片方向伝送が特徴です。

親コンポーネントは、props を通じて子コンポーネントにデータを渡します:

<template>
  <child-component :message="parentMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    data() {
      return {
        parentMessage: 'this is parent'
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

子コンポーネントでは、props を宣言し、props を使用して親コンポーネントからデータを受け取る必要があります:

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

次に、子コンポーネントはイベントを通じて親コンポーネントにデータを送信します。

<template>
  <button @click="updateParentMessage">Update Parent Message</button>
</template>
<script>
  export default {
    methods: {
      updateParentMessage() {
        this.$emit('update-message', 'this is child');
      }
    }
  }
</script>

親コンポーネントでは、子コンポーネントのイベントをリッスンし、イベント リスニングで子コンポーネントからデータを受信する必要があります。 function:

<template>
  <child-component :message="parentMessage" @update-message="updateMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    data() {
      return {
        parentMessage: 'this is parent'
      }
    },
    components: {
      ChildComponent
    },
    methods: {
      updateMessage(message) {
        this.parentMessage = message;
      }
    }
  }
</script>

2. Vuex

Vuex は、Vue の状態管理用の公式プラグインです。 Vuex はグローバルな状態管理モデルを実装しています。ストアを通じてアプリケーションのすべてのコンポーネントの状態を一元管理します。複数のコンポーネントが状態を共有する場合、Vuex を使用すると、コンポーネント間のデータ交換と通信の管理が容易になります。

まず、Vuex ストアを作成する必要があります:

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: 'hello world'
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('updateMessage', message)
    }
  },
  getters: {
    getMessage: state => state.message
  }
})

export default store

コンポーネントでは、$store を使用してストア内の状態にアクセスし、commit メソッドを使用して変更するミューテーションを送信できます。状態:

<template>
  <div>{{ this.$store.getters.getMessage }}</div>
  <button @click="updateMessage">Update Message</button>
</template>
<script>
  export default {
    methods: {
      updateMessage() {
        this.$store.dispatch('updateMessage', 'hello vuex')
      }
    }
  }
</script>

3. $parent と $children

Vue のすべてのコンポーネントには、$parent プロパティと $children プロパティがあります。 $parent プロパティはコンポーネントの親コンポーネントを指し、$children プロパティはコンポーネントの子コンポーネントを指します。 $parent プロパティと $children プロパティを通じて、コンポーネントは親コンポーネントと子コンポーネントのデータとメソッドに直接アクセスできます。

たとえば、親コンポーネントは、$children 属性を通じて子コンポーネントのデータとメソッドにアクセスできます。

<template>
  <div>
    {{ $children[0].message }}
    <button @click="$children[0].updateMessage">Update message</button>
  </div>
</template>

子コンポーネントでは、message メソッドと updateMessage メソッドを定義する必要があります。

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello child'
      }
    },
    methods: {
      updateMessage() {
        this.message = 'hello parent'
      }
    }
  }
</script>

four , $refs

Vue のすべてのコンポーネントには $refs 属性があります。 $refs 属性は、コンポーネント内の ref 属性を使用して名前が付けられたサブコンポーネントまたは DOM 要素への参照を含むオブジェクトです。 $refs 属性を通じて、コンポーネントは相互に参照したり呼び出したりできます。

たとえば、親コンポーネントの ref 属性を通じてサブコンポーネントの参照を取得できます:

<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="updateMessage">Update message</button>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    methods: {
      updateMessage() {
        this.$refs.childComponent.updateMessage()
      }
    }
  }
</script>

サブコンポーネントでは、updateMessage メソッドを定義する必要があります:

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello child'
      }
    },
    methods: {
      updateMessage() {
        this.message = 'hello parent'
      }
    }
  }
</script>

5. イベント バス

イベント バスは、Vue コンポーネント間でイベントを効率的に配信できる、広く使用されている中央イベント システムです。イベント バスは、$emit メソッドを通じて他の Vue コンポーネントにイベントを送信したり、$on メソッドを通じて他の Vue コンポーネントから送信されたイベントを受信したりできる単純な Vue インスタンスです。

イベント バスを実装するときは、新しい Vue インスタンスを作成する必要があります:

import Vue from 'vue'

const bus = new Vue()

export default bus

次に、コンポーネントにイベント バスを導入し、$emit を使用してイベントを送信し、$on を使用してイベントを受信します。 . ：

// 发送事件
import Bus from './Bus.js'

Bus.$emit('event-name', data)

// 接收事件
import Bus from './Bus.js'

Bus.$on('event-name', (data) => {
  console.log(data)
})

6. Provide と Inject

Vue 2.2 の新しい Provide と Inject は、高度なコンポーネント通信方法です。 Provide と Inject を使用すると、親コンポーネントは、子に指示するだけでなく、すべての子孫コンポーネントにデータを渡すことができます。 Provide と Inject は、props、event、$parent/$children とは異なるコンポーネント通信の形式であり、より柔軟でカプセル化された通信方法です。

親コンポーネントは、provide を通じてデータを提供します:

<template>
  <child-component></child-component>
</template>
<script>
  export default {
    provide: {
      message: 'hello provide'
    }
  }
</script>

子コンポーネントでは、親コンポーネントから渡されたデータを受け取るために inject を定義する必要があります:

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    inject: ['message']
  }
</script>

これらは次のとおりです。 6種類のVueコンポーネント通信方法の紹介。アプリケーションのシナリオが異なれば、コンポーネントの通信方法も異なります。これらの通信方法をマスターすると、Vue コンポーネントの開発をより効率的、シンプル、かつ柔軟にすることができます。

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