Vue で兄弟コンポーネント間の通信を実装するにはどうすればよいですか?-Vue.js-php.cn

Vue で兄弟コンポーネント間の通信を実装するにはどうすればよいですか?

王林

リリース： 2023-07-17 22:17:09

オリジナル

6117 人が閲覧しました

Vue は、ユーザーインターフェイスを構築するための進歩的なフレームワークであり、コンポーネント化のアイデアを使用してアプリケーション全体を構築します。 Vue では、各コンポーネントは独立して開発および保守できますが、場合によっては兄弟コンポーネント間の通信を実装する必要があります。この記事では、Vue で兄弟コンポーネント通信を実装するいくつかの方法を紹介し、コード例を示します。

1. イベントバスの使用

イベントバスは、直接関係のないコンポーネントが通信できるようにする単純な通信方法です。 Vue では、空の Vue インスタンスをイベントバスとして使用できます。具体的な実装手順は次のとおりです。

イベントバスとして空の Vue インスタンスを作成し (bus という名前を付けます)、それを必要なコンポーネントにエクスポートします。コミュニケーション。
```
// bus.js
import Vue from 'vue'
export default new Vue()
```
ログイン後にコピー

通信が必要なコンポーネントで、$emit メソッドを使用してイベントをトリガーし、$on メソッドを使用してリッスンします。イベントへ。

// ComponentA.vue
import bus from 'bus.js'
export default {
  methods: {
    handleClick() {
      bus.$emit('custom-event', data)
    }
  }
}

ログイン後にコピー

// ComponentB.vue
import bus from 'bus.js'
export default {
  mounted() {
    bus.$on('custom-event', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      console.log(data)
    }
  }
}

ログイン後にコピー

イベントバスを使用する利点は、実装が簡単であることですが、グローバルであるため、コードの可読性と保守性が低下する可能性があります。

2. Vuex を使用する

Vuex は Vue の公式状態管理ライブラリであり、アプリケーションに集中ストレージを提供し、コンポーネント間で状態を共有できます。 Vuex を使用すると、兄弟コンポーネント間の通信を簡単に実装できます。具体的な実装手順は次のとおりです。

Vuex をインストールし、Vue インスタンスで構成します。

// main.js
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    updateMessage(state, payload) {
      state.message = payload
    }
  }
})

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

ログイン後にコピー

通信が必要なコンポーネントでは、mapState と mapMutations 補助関数を使用して、Vuex で状態を取得および操作します。

// ComponentA.vue
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapMutations(['updateMessage']),
    handleClick() {
      this.updateMessage('Hello from ComponentA')
    }
  }
}

ログイン後にコピー

// ComponentB.vue
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['message'])
  }
}

ログイン後にコピー

Vuex を使用する利点は、コンポーネント間の通信と状態管理を容易にする集中状態管理メカニズムが提供されることです。ただし、アプリケーション全体に導入し、状態を維持する必要があります。

3. $parent 属性と $children 属性を使用する

Vue では、各コンポーネントインスタンスには $parent 属性と $children 属性があり、通信が可能になります。兄弟コンポーネント間。具体的な実装手順は次のとおりです。

親コンポーネントで、データを子コンポーネントに渡します。

// ParentComponent.vue
<template>
  <div>
    <ChildComponent :data="message"></ChildComponent>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello from ParentComponent'
    }
  }
}
</script>

ログイン後にコピー

子コンポーネントで、$parent 属性を通じて親コンポーネントのデータを取得します。
```
// ChildComponent.vue
<template>
  <div>
    <p>{{ $parent.message }}</p>
  </div>
</template>
```
ログイン後にコピー

$parent プロパティと $children プロパティを使用する利点は、実装が簡単であるにもかかわらず、Vue のプロパティに基づいていることです。コンポーネントのツリー構造: コンポーネントの階層が深く、直感的ではない可能性があり、コンポーネント構造への変更に大きく依存している場合。

要約すると、Vue で兄弟コンポーネント通信を実装するための 3 つの方法を導入しました。イベントバスの使用、Vuex の使用、$parent および $childrenAttributes の使用です。さまざまなニーズやシナリオに応じて、コンポーネント間の通信を実現するために最適な方法を選択できます。

以上がVue で兄弟コンポーネント間の通信を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。