使用vuex进行兄弟组件通信

使用vuex进行兄弟组件通信的核心思路就是将vuex作为一个store(vuex被设计的原因之一)，将每个子组件的数据都存放进去，每个子组件都从vuex里获取数据，其实就是一句话——把vuex作为一个桥

父组件App.vue

  #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;
  }

子组件ChildA

  div#childA {    border: 1px solid black;
  }

子组件ChildB

  div#childB {    border: 1px solid green;
  }

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
})

作者：bluesboneW                        
来源：https://segmentfault.com/a/1190000014838912?utm_source=channel-hottest