使用vuex進行兄弟組件通訊

我把全部的代碼+註釋都放在github了， 源碼連接， 預覽連接

1. 核心想法

使用vuex進行兄弟組件通訊的核心思路就是將vuex做爲一個store(vuex被設計的緣由之一)，將每一個子組件的數據都存放進去，每一個子組件都從vuex裏獲取數據，其實就是一句話——把vuex做爲一個橋

2. 具體代碼

父組件App.vue

<template>
  <div id="app">
    <ChildA/>
    <ChildB/>
  </div>
</template>

<script>
  import ChildA from './components/ChildA' // 導入A組件
  import ChildB from './components/ChildB' // 導入B組件

  export default {
    name: 'App',
    components: {ChildA, ChildB} // 註冊A、B組件
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

  div {
    margin: 10px;
  }
</style>

子組件 ChildA

<template>
  <div id="childA">
    <h1>我是A組件</h1>
    <button @click="transform">點我讓B組件接收到數據</button>
    <p>由於你點了B，因此個人信息發生了變化：{{BMessage}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        AMessage: 'Hello，B組件，我是A組件'
      }
    },
    computed: {
      BMessage() {
        // 這裏存儲從store裏獲取的B組件的數據
        return this.$store.state.BMsg
      }
    },
    methods: {
      transform() {
        // 觸發receiveAMsg，將A組件的數據存放到store裏去
        this.$store.commit('receiveAMsg', {
          AMsg: this.AMessage
        })
      }
    }
  }
</script>

<style>
  div#childA {
    border: 1px solid black;
  }
</style>

子組件 ChildB

<template>
  <div id="childB">
    <h1>我是B組件</h1>
    <button @click="transform">點我讓A組件接收到數據</button>
    <p>由於你點了A，因此個人信息發生了變化：{{AMessage}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        BMessage: 'Hello，A組件，我是B組件'
      }
    },
    computed: {
      AMessage() {
        // 這裏存儲從store裏獲取的A組件的數據
        return this.$store.state.AMsg
      }
    },
    methods: {
      transform() {
        // 觸發receiveBMsg，將B組件的數據存放到store裏去
        this.$store.commit('receiveBMsg', {
          BMsg: this.BMessage
        })
      }
    }
  }
</script>

<style>
  div#childB {
    border: 1px solid green;
  }
</style>

vuex模塊 store.js

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

Vue.use(Vuex)

const state = {
  // 初始化A和B組件的數據，等待獲取
  AMsg: '',
  BMsg: ''
}

const mutations = {
  receiveAMsg(state, payload) {
    // 將A組件的數據存放於state
    state.AMsg = payload.AMsg
  },
  receiveBMsg(state, payload) {
    // 將B組件的數據存放於state
    state.BMsg = payload.BMsg
  }
}

export default new Vuex.Store({
  state,
  mutations
})